Effetto menu di navigazione.

Luce84 · 13 Mag 2013

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!

Fez Vrasta · 13 Mag 2013

si chiamano Megamenu quelli di solito.

Cerca su Google javascript mega menu

Luce84 · 13 Mag 2013

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 · 13 Mag 2013

RockNavMenu ha quella funzione. Io uso quello di solito.

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

Luce84 · 14 Mag 2013

Grazie ancora per l'aiuto
Ora non mi resta che studiare.
saluti

andy2481 · 27 Mag 2013

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

Fez Vrasta · 27 Mag 2013

jkmegamenu.css è nel posto giusto?

andy2481 · 27 Mag 2013

Fez Vrasta ha scritto:
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

Fez Vrasta · 27 Mag 2013

se carichi tutto su uno spazio di prova che posso vedere ti aiuto

andy2481 · 27 Mag 2013

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

andy2481 · 27 Mag 2013

questo il link originale

questo il link ove ho preso tale menù
il codice originale
http://javascriptkit.com/script/script2/jkmegamenu.shtml

Cerca

Cerca

Effetto menu di navigazione.

Luce84

Nuovo Utente

Fez Vrasta

Utente Attivo

Luce84

Nuovo Utente

Fez Vrasta

Utente Attivo

Luce84

Nuovo Utente

andy2481

Utente Attivo

Fez Vrasta

Utente Attivo

andy2481

Utente Attivo

Fez Vrasta

Utente Attivo

andy2481

Utente Attivo

andy2481

Utente Attivo

Discussioni simili