Пусто
20.06.2026
 
| Главная | Форум | Поиск | Фотоальбом | Ваша ссылка | Профиль | Выход |
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: Артур  
Новая менюшка
АртурДата: Воскресенье, 29.03.2009, 16:48 | Сообщение # 1
Admin
Группа: Администраторы
Сообщений: 368
Репутация: 8
Бог сайта и форума За хорошую посещаемость на форуме
Статус: Offline
Награды
За 10 сообщений За 20 сообщений За 30 сообщений За 40 сообщений За 50 Сообщений За 100 Сообщений За 150 Сообщений За 300 Сообщений
Такого кода ещё не было! Были коды, которые очень большие и непонятные!! А это простой код и несложный!!!:loony:

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

Code
<style type="text/css">
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* 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: 170px; /*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: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

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

.suckerdiv ul li a:hover{
background-color: #377CB4;
}

.suckerdiv .subfolderstyle{
background: url(http://promax.pp.ru/imagesmenu/arrow-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])
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"
else
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
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--){
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">
<ul id="suckertree1">
<li><a href="Сылка" title="Описание при наведении">Название страницы</a></li>
<li><a href="Сылка" title="Описание при наведении">Название страницы</a>
<ul>
<li><a href="Сылка" title="Описание при наведении">Название страницы</a>
</li>
</ul>
<li><a href="Сылка" title="Описание при наведении">Название страницы</a>
<ul>
<li><a href="Сылка" title="Описание при наведении">Название страницы</a>
<li><a href="Сылка" title="Описание при наведении">Название страницы</a>
</ul>
</li>
</div>

Всё что ниже красным цветом, меняем под свой дизайн и радуемся =) #377CB4- это цвет при наведении на ссылку
/* 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: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

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

.suckerdiv ul li a:hover{
background-color: #377CB4;
}

Вот черное меню

Code
<style type="text/css">
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #000000;
}

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*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: #FFFFFF;
text-decoration: none;
background: #000000;
padding: 1px 5px;
border: 1px solid #FFFFFF;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: #FFFFFF;
}

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

.suckerdiv .subfolderstyle{
background: #000000 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])
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"
else
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
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--){
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">
<ul id="suckertree1">
<li><a href="Сылка" title="Описание при наведении">Название страницы</a></li>
<li><a href="Сылка" title="Описание при наведении">Название страницы</a>
<ul>
<li><a href="Сылка" title="Описание при наведении">Название страницы</a>
</li>
</ul>
<li><a href="Сылка" title="Описание при наведении">Название страницы</a>
<ul>
<li><a href="Сылка" title="Описание при наведении">Название страницы</a>
<li><a href="Сылка" title="Описание при наведении">Название страницы</a>
</ul>
</li>
</div>
 
  • Страница 1 из 1
  • 1
Поиск:

Статистика форума
Последние темы Читаемые темы Лучшие пользователи Новые пользователи
День пожилых людей! (0)
Кто победит Windows vs Linux (1)
Как скачать бесплатно и не выжидать время! (1)
Лучшие фильмы (1)
Ужасы (1)
Лучшие мультфильмы (1)
Что Вы чаще всего смотрите по телевизору? (2)
Какие фильмы вам нравятся? (1)
КАКУЮ МУЗЫКУ ВЫ СЛУШАЕТЕ? (1)
Игра 2008 года (5)
Нравиться ли вам игра Сталкер чистое небо (8)
S.T.A.L.K.E.R: call of pripyat - прохождение (0)
Анекдоты (49)
Анекдоты.. (13)
Нравиться ли вам игра Сталкер чистое небо (8)
Игра 2008 года (5)
Конкурс (5)
Форма заказа сайта!!! (4)
Что Вы чаще всего смотрите по телевизору? (2)
На Каком уровне сложности вы проходите игры? (2)
Pop-under.ru (2)
Украина!!! (2)

Артур

Катя

Denis

maxeg

RigerCF

Decoy

Гера

Лина)))

SanYOk

Катюшка

oxxxst1s

STOTTbarhah

Gypsublipsy

AstellaLast

Nixirogeaboge

orgasprox

Plonseelottor

Preebraphenna

Infonosax

suehirehimb
Все материалы размещенные на сайте пренадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает. По истечении 24 часов материал должен быть удален с вашего компьютера. Незаконная реализация карается законами РФ: "Об авторском и смежном праве".
При копировании материала, ссылка на сайт обязательна!