Меню, как правило, находится в шапке
сайта и является перечнем ссылок на самые важные страницы, его также называют
главным меню.
Главное горизонтальное выпадающее меню для веб-проекта «Мелиоративные
машины» выглядит так
Html-код можете
скачать по адресу https://multiurok.ru/files/html-kod-ghorizontal-nogho-mieniu-vieb-proiekta-mieliorativnyie-mashiny.html
Ниже расположены стили данного меню.
#nav{
margin-left:
4px;
color:
#f00;
font-size:
90%;
font-weight:
bold;
line-height::
1.2px;
text-align:
center;
margin-bottom:
5px;
}
#navul{
width:
100%;
text-align:
center;
list-style-type:
none;
}
#navulli{
float:left;
height:
20px;
width:136px;
text-align:center;
background:
#B6B66D;
position:relative;
padding-top:
2px;
padding-bottom:
4px;
}
#nav li ul{
list-style:none;
width:150px;
display:none;
position:absolute;
left:0;
top:20px;
}
#nav
li ulli{
float:none;
height:
auto;
width:150px;
font-weight:
lighter;
text-align:
center;
background:
#B6B66D;
z-index:2;
}
#nav li a{
width:
120px;
color:
Maroon;
text-decoration:
none;
}
#nav li a{
width:136px;
color:
Maroon;
text-decoration:
none;
}
#navli:hoverul, #navli.jshoverul{
display:block;
}
#navli:hover, #navli.jshover{
background:
#F5F5DC;
}
i-language:EN-US'>
#nav li
a{
width:136px;
color: Maroon;
text-decoration: none;
}
#navli:hoverul,
#navli.jshoverul{
display:block;
}
#navli:hover,
#navli.jshover{
background: #F5F5DC;
}
Скрипт для выпадающего меню
<script>
jsHover = function() {
var hEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0, len=hEls.length; i<len; i++) {
hEls[i].onmouseover=function() { this.className+=" jshover"; }
hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
}
}
if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
</script>
Автор: Власовец Надежда Витальевна.
Спасибо! Пошел пробовать
ОтветитьУдалить