Добрый день! Подскажите плиз, как создать такое меню? Что надо прописывать в css и т.п. Заранее благодарю!
Добрый день! Подскажите плиз, как создать такое меню? Что надо прописывать в css и т.п. Заранее благодарю!
[/quote]
Книжки умные почитать, статьи интересные поискать, попробовать сделать самому, если что-то пойдет не так – спросить совета здесь. Примерно так можно создать...
Гляди это CSS или
<style type="text/css">
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #F3F3F3;
}
.suckertreemenu ul li a{
display: block;
width: 90px;
padding: 1px 8px;
border: 1px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
}
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em;
display: block;
visibility: hidden;
}
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}
.suckertreemenu ul li ul li ul{
left: 159px;
top: 0;
}
.suckertreemenu ul li ul li a{
display: block;
width: 160px;
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}
.suckertreemenu ul li a:hover{
background-color: black;
color: white;
}
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
}
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
}
padding-top: 1em;
}
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
</style>
Это между<head></head>
<script type="text/javascript">
var menuids=["treemenu1"]
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
Это в body
<div class="suckertreemenu">
<ul id="treemenu1">[*][Только зарегистрированные пользователи могут видеть ссылки. ][*][Только зарегистрированные пользователи могут видеть ссылки. ][*][Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
[*][Только зарегистрированные пользователи могут видеть ссылки. ][*][Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
</a>
[*][Только зарегистрированные пользователи могут видеть ссылки. ][/list]
<br style="clear: left;" />
</div>
<p id="iepara">Rest of content here</p>
Спасибо!
Ваши права
