Dla webmastera > Tutoriale
Rozwijane menu
Skye:
Znalazłam na kompie ciekawy skrypt, będący alternatywą do tego, serwowanego przez dynamicdrive, znanego jako dropdown menu:)
To jeszcze pozostałość po szablonach blogowych:)
Poniżej zamieszam kod, a tutaj - http://retrocreatives.com/inn.html macie podgląd:)
Jak widać jest to bardzo gołe, ale jak np doda się inne tła, zmieni czcionkę, to może wyjść całkiem sympatyczne menu:)
--- Kod: ---<html><head>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nawigacja").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>
<![endif]-->
<style type="text/css">
*{margin:0;padding:0}
body {
font: x-small Verdana, Arial, Helvetica, sans-serif;
text-align:center;
padding:0px;margin:0px;
}
#gora { filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;position:relative;top:300px;left:100px; }
ul#nawigacja,ul#nawigacja ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nawigacja {color:green;
height:40px;
width:202px;
background:#525252;border:1px solid #2A2929;
}
ul#nawigacja li {
position: relative;
float: left;
width:100px;
height:40px;
border-right:1px solid silver;
background:#525252;
color:#fff;
text-align:left;
}
ul#nawigacja li a {
text-decoration: none;
color:color:green;
}
#nawigacja li ul {
position: absolute;
left: 0;
margin-left:-999em;
border:none;
background:#000;
border-right:1px solid silver;
}
ul#nawigacja li li{height:auto;border:none;}
ul#nawigacja li li a{
color:#fff;
padding:5px 5px 5px 5px;
display:block;
}
ul#nawigacja li:hover ul,
ul#nawigacja li.over ul {color:green;
margin-left:0;
}
ul#nawigacja li:hover,
ul#nawigacja li.over,
ul#nawigacja li:hover a,
ul#nawigacja li.over a {color:green;}
ul#nawigacja li:hover li a,ul#nawigacja li.over li a{color:#fff;}
ul#nawigacja li li a:hover{color:red;}
ul#nawigacja li p {padding:5px;}
ul#nawigacja li.last,ul#nawigacja li.last ul{border:none;width:200px;}
</style>
</head>
<body>
<div id="gora">
<ul id="nawigacja">
<li>
<a href="#">Read more</a></p>
<ul>
<li><a href="#">Links go here</a></li>
<li><a href="#">Links go here</a></li>
<li><a href="#">Links go here</a></li>
</ul>
</li>
<li>
<a href="#">Read more 2</a></p>
<ul>
<li><a href="#">Links go here</a></li>
</ul>
</li>
</ul>
</div>
</body></html>
--- Koniec kodu ---
PA_BLO:
Dzięki Skye :) leci +
Zuzolinda:
Rzeczywiście może się bardzo przydać :) Dzięki wielkie! I oczywiście plus za podzielenie się skryptem ;)
Mikaela:
Jeszcze nie moge dac plusika ale pewnie skorzystam więc proszę kogoś innego o danie go <proooosi> ;-*
Dzisiaj wgrałam sobie nawet skrypt do wordpressa z tym menu, zobaczymy czy będzie działał;)
PA_BLO:
--- Cytat: Mikaela w 21 Listopad 2011, 21:31:17 ---Jeszcze nie moge dac plusika ale pewnie skorzystam więc proszę kogoś innego o danie go <proooosi> ;-*
Dzisiaj wgrałam sobie nawet skrypt do wordpressa z tym menu, zobaczymy czy będzie działał;)
--- Koniec cytatu ---
Ja dałem za Ciebie :)
Nawigacja
[#] Następna strona
Idź do wersji pełnej