maloun Опубликовано 18 июля, 2016 Поделиться Опубликовано 18 июля, 2016 Сегодня я вам покажу , как сделать красивое , боковое меню! Для начала устанавливаем данный компонент (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> --> Вот так будет выглядеть ваше меню , спасибо за внимание! 1 Ссылка на комментарий
Рекомендуемые сообщения
Для публикации сообщений создайте учётную запись или авторизуйтесь
Вы должны быть пользователем, чтобы оставить комментарий
Создать учетную запись
Зарегистрируйтесь. Это очень просто!
Регистрация нового пользователяВойти
Уже есть аккаунт? Войти в систему.
Войти