Effetto menu di navigazione.

Luce84

Nuovo Utente
13 Mag 2013
4
0
0
Ciao a tutti!
Mi sono appena iscritto a questo forum e spero di non aver sbagliato sezione.
Volevo chiedere un aiuto in merito alla realizzazione di un particolare menù di navigazione.
Come posso ottenere un menù orizzontale di navigazione come su questo sito?
http://www.marcopoloshop.it/

In particolare mi interessa sapere come creare l'effetto dei sub menù, che in pratica si visualizzano tutti nello stesso box, grande quanto tutto il menù di navigazione.
Come si chiamano i tag da inserire nei file html e css per ottenere quell'effetto?
Grazie a tutti in anticipo.
Ciao! :):):)
 

Luce84

Nuovo Utente
13 Mag 2013
4
0
0
Ciao Fez Vrasta e grazie per l'ottima informazione.
Ora provo a fare delle ricerche.
Per caso sai come è possibile integrare questo tipo di menù in joomla?
 

Fez Vrasta

Utente Attivo
11 Mag 2013
409
0
0
RockNavMenu ha quella funzione. Io uso quello di solito.

Sennò ce ne è uno che si chiama proprio MegaMenu mi pare.
 

andy2481

Utente Attivo
10 Dic 2012
142
0
0
io sto sperimantando questo

Io ho trovato questo e non riesco a capire dove sia il problema posto il codice.
da premettere che continuerò a vedere e cercare di riuscirci


HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />

<script type="text/javascript" src="jkmegamenu.js">

/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">

//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")


</script>->


<script type="text/javascript"> / / jkmegamenu.definemenu ("anchorId", "menuid", "mouseover | click") 

jkmegamenu.definemenu ("megaanchor", "megamenu1", "mouseover") </ script>

</style>
</head>
<body>
<a href="http://www.javascriptkit.com" id="megaanchor">Tech Links</a>



<!--Mega Drop Down Menu HTML. Retain given CSS classes-->
<div id="megamenu1" class="megamenu">

<div class="column">
	<h3>Web Development</h3>
	<ul>
	<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
	<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
	<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
	<li><a href="http://www.codingforums.com">Coding Forums</a></li>
	<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
	</ul>
</div>

<div class="column">
	<h3>News Related</h3>
	<ul>
	<li><a href="http://www.cnn.com/">CNN</a></li>
	<li><a href="http://www.msnbc.com">MSNBC</a></li>
	<li><a href="http://www.google.com">Google</a></li>
	<li><a href="http://news.bbc.co.uk">BBC News</a></li>
	</ul>
</div>

<div class="column">
	<h3>Technology</h3>
	<ul>
	<li><a href="http://www.news.com/">News.com</a></li>
	<li><a href="http://www.slashdot.com">SlashDot</a></li>
	<li><a href="http://www.digg.com">Digg</a></li>
	<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
	</ul>
</div>

<br style="clear: left" /> <!--Break after 3rd column. Move this if desired-->

<div class="column">
	<h3>Web Development</h3>
	<ul>
	<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
	<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
	<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
	<li><a href="http://www.codingforums.com">Coding Forums</a></li>
	<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
	</ul>
</div>

<div class="column">
	<h3>News Related</h3>
	<ul>
	<li><a href="http://www.cnn.com/">CNN</a></li>
	<li><a href="http://www.msnbc.com">MSNBC</a></li>
	<li><a href="http://www.google.com">Google</a></li>
	<li><a href="http://news.bbc.co.uk">BBC News</a></li>
	</ul>
</div>

<div class="column">
	<h3>Technology</h3>
	<ul>
	<li><a href="http://www.news.com/">News.com</a></li>
	<li><a href="http://www.slashdot.com">SlashDot</a></li>
	<li><a href="http://www.digg.com">Digg</a></li>
	<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
	</ul>
</div>

</div>

<!--Mega Menu Anchor-->
<a href="http://www.javascriptkit.com" id="megaanchor">Tech Sites</a>

<!--Mega Drop Down Menu HTML. Retain given CSS classes-->
<div id="megamenu1" class="megamenu">
Mega Menu HTML here...
</div>
</body>
</html>

il problema che non mi da l'effetto di defaul
ma mi si apre a lista come se non ci fossero i paramentri css
 

andy2481

Utente Attivo
10 Dic 2012
142
0
0
jkmegamenu.css è nel posto giusto?

si i file sono tutti nella stessa cartella

ho provato a cancellare

<style type="text/css"> ......... <s/tyle>l'ho avevo aggiunto io
ma il risultato che mi scompare tutto e mi rimane sonlo una preccetta di commento -->.
Il perchè l'ho tolto? perche il richiamo è ad un foglio esterno non non nella pagina ma ripeto il
risultato è peggiore
 
Ultima modifica:

andy2481

Utente Attivo
10 Dic 2012
142
0
0
Ecco

questo è il link http://www.papillon-events.it/index.html

Ho apportato modifiche quello che non riesco a comprendere ora è come aprire i 2 link del menù quele estensione devo dargli?

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<script type="text/javascript"> / / jkmegamenu.definemenu ("anchorId", "menuid", "mouseover | click") 

jkmegamenu.definemenu ("megaanchor", "megamenu1", "mouseover") </ script>






<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />

<script type="text/javascript" src="jkmegamenu.js">

/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">

//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")

</script>


</head>
<body>
<!--Mega Menu Anchor-->
<a href="http://www.javascriptkit.com" id="megaanchor">Tech Links</a>



<!--Mega Drop Down Menu HTML. Retain given CSS classes-->
<div id="megamenu1" class="megamenu">

<div class="column">
	<h3>Web Development</h3>
	<ul>
	<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
	<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
	<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
	<li><a href="http://www.codingforums.com">Coding Forums</a></li>
	<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
	</ul>
</div>

<div class="column">
	<h3>News Related</h3>
	<ul>
	<li><a href="http://www.cnn.com/">CNN</a></li>
	<li><a href="http://www.msnbc.com">MSNBC</a></li>
	<li><a href="http://www.google.com">Google</a></li>
	<li><a href="http://news.bbc.co.uk">BBC News</a></li>
	</ul>
</div>

<div class="column">
	<h3>Technology</h3>
	<ul>
	<li><a href="http://www.news.com/">News.com</a></li>
	<li><a href="http://www.slashdot.com">SlashDot</a></li>
	<li><a href="http://www.digg.com">Digg</a></li>
	<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
	</ul>
</div>

<br style="clear: left" /> <!--Break after 3rd column. Move this if desired-->

<div class="column">
	<h3>Web Development</h3>
	<ul>
	<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
	<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
	<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
	<li><a href="http://www.codingforums.com">Coding Forums</a></li>
	<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
	</ul>
</div>

<div class="column">
	<h3>News Related</h3>
	<ul>
	<li><a href="http://www.cnn.com/">CNN</a></li>
	<li><a href="http://www.msnbc.com">MSNBC</a></li>
	<li><a href="http://www.google.com">Google</a></li>
	<li><a href="http://news.bbc.co.uk">BBC News</a></li>
	</ul>
</div>

<div class="column">
	<h3>Technology</h3>
	<ul>
	<li><a href="http://www.news.com/">News.com</a></li>
	<li><a href="http://www.slashdot.com">SlashDot</a></li>
	<li><a href="http://www.digg.com">Digg</a></li>
	<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
	</ul>
</div>

</div>
<!--Mega Menu Anchor-->
<a href="http://www.javascriptkit.com" id="megaanchor">Tech Sites</a>
<!--Mega Drop Down Menu HTML. Retain given CSS classes-->
<div id="megamenu1" class="megamenu">
Mega Menu HTML here...
</div>





</body>
</html>

HTML:
<a href="http://www.javascriptkit.com" id="megaanchor">Tech Links</a>

HTML:
<a href="http://www.javascriptkit.com" id="megaanchor">Tech Sites</a>

posto il codice che puo servire in futuro anche a gl'ialtri utenti
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
A [HTML] Menu con effetto slide down HTML e CSS 0
V Effetto menu jQuery 0
O effetto menu galleggiante nello spazio Flash 10
E telecamera effetto nebbia IP Cam e Videosorveglianza 0
S [Photoshop] Nome di questo effetto (vedi foto) Photoshop 1
S [HTML] Effetto su testo da togliere HTML e CSS 0
F [Photoshop] Effetto "vetro" Photoshop 1
A [Photoshop] come poter realizzare il seguente "effetto" Photoshop 4
P [Photoshop CC] Come posso creare quest'effetto - cerchi concentrici Windows e Software 6
P [Photoshop] Effetto ombra Photoshop 1
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
trattorino [Javascript] effetto carino sul click mi aiutate? Javascript 1
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
M [Photoshop] Come posso creare questo effetto ? Photoshop 2
T [Javascript] identico carousel con effetto fade: in una pagina va in un'altra no, mistero? Javascript 3
I Effetto glowing su immagine con GIMP Webdesign e Grafica 0
MimmoMandrillo [Photoshop] Che effetto è questo? Photoshop 3
R [Photoshop] Come creare questo effetto (v.immagine)?(sovrapposizione immagini in modo uniforme) Photoshop 2
D [Photoshop] Come arrivare a questo effetto? Photoshop 4
S [Photoshop] aiuto effetto glitch scanner (scanner art) Photoshop 1
A Effetto hue-rotate con javascript Javascript 2
elpirata Creare scritte flash effetto dinamico Flash 2
M [HTML] Slideshow immagini con effetto FADE HTML e CSS 2
F [HTML] Navbar interferisce con codice per effetto parallax HTML e CSS 2
D effetto con adobe muse Windows e Software 1
X [Photoshop] Cercasi strumento per ottenere un semplice effetto. Photoshop 6
F [HTML] Effetto fade su ogni immagine contenute in uno slider HTML e CSS 16
S [HTML] Effetto hover in un div HTML e CSS 6
M [Photoshop] come realizzare un effetto speciale? Photoshop 1
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
R [HTML] Pulsante con effetto dissolvenza (fading) HTML e CSS 10
trattorino [Javascript] caricamento immagine con effetto fade Javascript 1
R Effetto sul testo Javascript 3
K Effetto psichedelico Flash 0
G Effetto mosso tipo calce. Photoshop 1
P Effetto spruzzo di profumo Photoshop 1
J Aggiunta di un effetto di transizione al plugin Quick Pager jQuery 0
L effetto galleria popup (immagini) jQuery 1
M effetto del testo css HTML e CSS 1
Z Effetto pennello con Flash Flash 0
P Visualizzare video mp4 con effetto lightbox jQuery 1
L Effetto fade a div Javascript 1
L Effetto hover con jquery jQuery 2
F effetto movimento immagini jquery jQuery 3
matteoraggi Come si fa a ricreare l'effetto dei pesciolini? WordPress 3
F Effetto comparsa header Javascript 2
F mappa jquery con effetto hover + fancybox Javascript 1
F Come si chiama questo effetto hover? Javascript 1
J effetto sliding dors come cover per entrare in un sito JQ Javascript 0
D Effetto foto come quella di Mika Photoshop 1

Discussioni simili