Autore Topic: Drop down menu orizzontale con javascript e css (Letto 4439 volte)

pixma22 · « **il:** 18 Mag 2007, 10:08:05 »

Chi volesse realizzare un bellissimo menu che funzione con IE Firefox e Opera lascio javascript e css per poterlo realizzare.
Si procede in questo modo:
All'interno di <head> e </head> del vostro index inserite questo script:

Codice: [Seleziona]

					<script type="text/javascript"><!–//–><![CDATA[//><!–

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//–><!]]></script>

Dopo di che inserite la riga dove deve leggere il css per dare forma colore dimensione , si insomma tutto....

Codice: [Seleziona]

<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/suckerfish.css" rel="stylesheet" type="text/css" />

Ricordatevi di inserire poi il file css nella cartella del template.
A questo punto All'interno del <body> </body> nel punto in cui volete far apparire il menu queste righe:

Codice: [Seleziona]

		<div id="nav">
		<ul><li class="active"><a href="http://localhost/com/index.php">Home</a></li>
<li><a class="topdaddy" href="http://www.gavick.com/templatesdemo/april2007/#">Modules</a><ul>
<li><a href="http://www.gavick.com/templatesdemo/april2007/index.php?option=com_content&amp;task=view&amp;id=17&amp;Itemid=28">Module Variations</a></li>
<li><a href="http://www.gavick.com/templatesdemo/april2007/index.php?option=com_content&amp;task=view&amp;id=18&amp;Itemid=29">Module positions</a></li>
</ul></li>
<li><a href="http://www.gavick.com/templatesdemo/april2007/index.php?option=com_content&amp;task=view&amp;id=12&amp;Itemid=26">Typography</a></li>
<li><a class="topdaddy" href="http://www.gavick.com/templatesdemo/april2007/#">Joomla Elements</a><ul>
<li><a href="http://www.gavick.com/templatesdemo/april2007/index.php?option=com_content&amp;task=blogsection&amp;id=0&amp;Itemid=9">Blog</a></li>
<li><a href="http://www.gavick.com/templatesdemo/april2007/index.php?option=com_weblinks&amp;Itemid=23">Links</a></li>
<li><a href="http://www.gavick.com/templatesdemo/april2007/index.php?option=com_content&amp;task=category&amp;sectionid=3&amp;id=7&amp;Itemid=25">FAQs</a></li>
<li><a href="http://www.gavick.com/templatesdemo/april2007/index.php?option=com_newsfeeds&amp;Itemid=7">News Feeds</a></li>
<li><a href="http://www.gavick.com/templatesdemo/april2007/index.php?option=com_contact&amp;Itemid=3">Contact Us</a></li>
</ul></li>
<li><a href="http://www.gavick.com/templatesdemo/april2007/index.php?option=com_wrapper&amp;Itemid=8">Wrapper</a></li>
</ul>            </div>

dove per "topdaddy" sta per posizione top mentre gli altri sono i sotto menu.
Volete vedere una demo?http://www.gavick.com/templatesdemo/april2007/index.php
Il <div id="nav"> <div> serve per assegnare il css che avete creato,cioè colore forma ecc..........
Mi direte e il css? eccolo

Codice: [Seleziona]

#toolbar {}
#nav {
	margin: 0;
	padding: 0;
	height: 25px;
}
#nav a {
	text-transform: uppercase;
	font-size: 0.9em;
	color: #fff;
	float: left;
	text-decoration: none;
	display: block;
	cursor: pointer;
	line-height: 25px;
	padding: 0 15px;
}
#nav a.topdaddy,
#nav li a {
	background: url(../images/np_maj_menu_bullet.png) repeat 100% 0;
}
#nav li a:hover{}
#nav li li a{
	background: none;
	font-weight: normal;
	padding: 0;
	text-indent: 15px;
	text-transform: uppercase;
	color: #939393;
	line-height: 21px;
}
#nav ul li ul li a:hover{
	background: none;
}
#nav ul li a:hover,
#nav ul li ul li ul li a:hover {
	color: #fff;
}
#nav, #nav ul {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
#nav li li {
	padding: 0;
	background: none;
	border-bottom: 1px solid #252121;
}


#nav a {}


#nav ul ul a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	width: 250px;
	text-transform: uppercase;
	font-size: 0.9em;
	text-align: left;

}


#nav li {
	float: left;
	padding: 0;
 	background: none;
	height: 23px;

}
#nav ul li {
	position: relative;
}
#nav li ul {
	top: 24px;
	position: absolute;
	left: -999em;
	height: auto;
	width: 170px;
	font-weight: normal;
	border-width: 0;
	margin: 0;
	padding: 0;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	
	
}	
#nav ul {
	padding: 0;
	margin: 0;
	margin-left: 2px;
}
#nav li li {
	float: left;
	padding: 0;
   	width: 170px;
}


#nav li ul ul {
	margin: -24px 0 0 170px;
}
#nav li:hover ul ul, 
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul,  
#nav li.sfhover ul ul, 
#nav li.sfhover ul ul ul, 
#nav li.sfhover ul ul ul ul {
	left: -999em;
}
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul,
#nav li.sfhover ul, 
#nav li li.sfhover ul, 
#nav li li li.sfhover ul,
#nav li li li li.sfhover ul{
	z-index: 100;
	left: 0;
}
#nav li:hover, #nav li.sfhover {
    left: 0;
    background-color: #000;
}
#nav li:hover a, #nav li.sfhover a {
    color: #fff;
}
#nav li li:hover a, #nav li li.sfhover a {
    color: #fff;
}
#nav li li:hover a:hover, #nav li li.sfhover a:hover {
    color: #BF0101;
}
#nav a {}
#nav ul ul a {
	background: none;
}
#nav li.active {}
#nav li li.active {
	background: none;
}
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul,
#nav li.sfhover ul, 
#nav li li.sfhover ul, 
#nav li li li.sfhover ul,
#nav li li li li.sfhover ul{
	background: #000;
}

Ok buon divertimento.

Autore Topic: Drop down menu orizzontale con javascript e css (Letto 4439 volte)

pixma22

Drop down menu orizzontale con javascript e css