Перейти к содержанию
IPSGuru.ru - Сообщество веб администраторов

Боковое Меню


Рекомендуемые сообщения

Сегодня я вам покажу , как сделать красивое , боковое меню!

Для начала устанавливаем данный компонент (e32) Custom Sidebar Blocks

После установки компонента в АЦ добавляем новый блок и туда вставляем данный код:

<!--U1MENU1Z--><table width="200" border="0" cellpadding="0" cellspacing="0">  
<tbody><tr> <td style="border: 1px solid rgb(140, 140, 140); padding: 5px; background: rgb(58, 53, 53) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">  
<style type="text/css">  

/*Credits: Dynamic Drive CSS Library */  
/*URL: http://www.dynamicdrive.com/style/ */  

.suckerdiv ul{  
margin: 0;  
padding: 0;  
list-style-type: none;  
width: 230px; /* Width of Menu Items */  
height: 190px; /* Width of Menu Items */  
border-bottom: 10px solid #3A3535;  
}  

.suckerdiv ul li{  
position: relative;  
}  

/*Sub level menu items */  
.suckerdiv ul li ul{  
position: absolute;  
width: 200px; /*sub menu width*/  
top: 0;  
visibility: hidden;  
}  

/* Sub level menu links style */  
.suckerdiv ul li a{  
display: block;  
overflow: auto; /*force hasLayout in IE7 */  
color: black;  
text-decoration: none;  
background: #F7A500;  
padding: 4px 15px;  
border: 10px solid #3A3535;  
border-bottom: 0;  
border-radius: 50px;
}  

.suckerdiv ul li a:visited{  
color: white;  
}  

.suckerdiv ul li a:hover{  
background: #D79105;  
}  

.suckerdiv .subfolderstyle{  
background: url(http://forever-web.ru/next.png) no-repeat center right;  
}  

/* Holly Hack for IE \*/  
* html .suckerdiv ul li { float: left; height: 1%; }  
* html .suckerdiv ul li a { height: 1%; }  
/* End */  

</style>  

<script type="text/javascript">  

//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)  
//By Dynamic Drive: http://www.dynamicdrive.com/style/  

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas  

function buildsubmenus(){  
for (var i=0; i<menuids.length; i++){  
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")  
for (var t=0; t<ultags.length; t++){  
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"  
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu  
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item  
else //else if this is a sub level submenu (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.onmouseover=function(){  
this.getElementsByTagName("ul")[0].style.display="block"  
}  
ultags[t].parentNode.onmouseout=function(){  
this.getElementsByTagName("ul")[0].style.display="none"  
}  
}  
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars  
ultags[t].style.visibility="visible"  
ultags[t].style.display="none"  
}  
}  
}  

if (window.addEventListener)  
window.addEventListener("load", buildsubmenus, false)  
else if (window.attachEvent)  
window.attachEvent("onload", buildsubmenus)  

</script>  
<div class="suckerdiv"><b>  
<ul id="suckertree1">  

<center>
<li><a href="ссылка">Правила Форума</a></li>  
<li><a href="ссылкаl">БанЛист Серверов</a></li>  
<li><a href="ссылка">Заявки на разбан</a>  
 <li><a href="ссылка">Жалобы на Администраторов</a></li>  
<li><a href="ссылка">Купить привилегию Online</a></li>  
<li><a href="ссылка">Купить платный разбан</a></li>  

  
 
</center>
</li>  


</b></div>  
</td></tr></tbody></table><div style="height: 5px;"></div><!--/U1MENU1Z-->  
<!--U1CLEFTER1Z--><!-- <block2> -->

Вот так будет выглядеть ваше меню , спасибо за внимание!

menu.jpg

  • Нравится 1
Ссылка на комментарий

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйтесь. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...