Хаки и Скрипты Next Generation CMS

Красивое простое вертекальное меню для сайта

irbees2008 irbees2008 Опубликовано - 25 - июня Меню и навигация
2733 - 0
  • Автор: --------------
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt

Красивое простое вертекальное меню для сайта. При наведении на категорию выпадает под-категория, хорошо впишется если на сайте много различного контента и его нужно категоризировать. Установка проста...

Установка:
1.В стили добавляем

Код:
 .suckerdiv ul{  
margin: 0;
padding: 0;
list-style-type: none;
width: 190px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

.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: #fff;
padding: 4px 15px;
border: 1px solid #ccc;
border-bottom: 0;
}

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

.suckerdiv ul li a:hover{
background-color: green;
}

.suckerdiv .subfolderstyle{
background: url(../images/next-list.gif) no-repeat center right;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */
2.В head
Код:
<script type="text/javascript">
var menuids=["suckertree1"]
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>
3.туда где хотите видеть меню
Код:
<div class="suckerdiv"><b>
<ul id="suckertree1">
<li><a href="/">Главная</a></li>
<li><a href="/forum/">Форум</a></li>
<li><a href="/gb/">Гостевая</a></li>
<li><a href="/load/">Все файлы</a></li>
<li><a href="/blog/">Блог</a>
<ul>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
</ul>
</li>

<li><a href="/">Ссылка</a>
<ul>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
</ul>
</li>

<li><a href="/">Ссылка</a>
<ul>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
</ul>
</li>
<li><a href="/photo/">Фотографии</a></li>
<li><a href="/index/0-3">Обратная связь</a></li>
</ul>
</b></div>
4.скачайте картинку Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. и залейте / ваш шаблон/images/
вот и все ,посмотреть как работает ,скопируйте внизу код и вставте в HMLT-Редактор он справа выдвигается
Код:
<style type="text/css">
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 190px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

.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: #fff;
padding: 4px 15px;
border: 1px solid #ccc;
border-bottom: 0;
}

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

.suckerdiv ul li a:hover{
background-color: green;
}

.suckerdiv .subfolderstyle{
background: url(http://wallaby.ucoz.ru/images/next-list.gif) 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">
var menuids=["suckertree1"]
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">
<li><a href="/">Главная</a></li>
<li><a href="/forum/">Форум</a></li>
<li><a href="/gb/">Гостевая</a></li>
<li><a href="/load/">Все файлы</a></li>
<li><a href="/blog/">Блог</a>
<ul>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
</ul>
</li>

<li><a href="/">Ссылка</a>
<ul>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
</ul>
</li>

<li><a href="/">Ссылка</a>
<ul>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
</ul>
</li>
<li><a href="/photo/">Фотографии</a></li>
<li><a href="/index/0-3">Обратная связь</a></li>
</ul>
</b></div>

Можешь почитать и вот эту статейку "Эффекты для диалоговых модальных окон вашего сайта"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [6]
  • Гости: [6]
  • Были сегодня : [3] Google, Яндекс, Google
  • SQL запросов: 34
  • Генерация страницы: 0.302сек
  • Потребление памяти: 5.255 Mb 
  •   Яндекс.Метрика