Name: Выпадающее меню в Укоз
Item: Выпадающее меню в Укоз
Author: rusbitor.in

Поиск

Форма входа

Меню сайта

Файлы

Вот такое выпадающее двухуровневое меню Для сайтов на УКОСЕ (УКОЗ) можно запросто сделать самостоятельно.

Этот код нужно вставлять в ПУ сайтом - Управление дизайном - Первый (второй) контейнер или туда куда вам захочется!

Конечно в код нужно ввести свои данные-ссылки на существующие статьи на сайте.

Итак меню представляет из себя обычный многоуровневый список:

<ul id="nav">
 <li><a href="">Главная</a></li>
 <li><a href="">Товары</a>
 <ul>
 <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>
 </ul>
 </li>
 <li><a href="">Условия</a></li>
 <li><a href="">Карта сайта</a></li>
</ul>

Для редактирования Стилей (внешнего вида) меню есть набор стилей CSS которые также надо будет вставить в
ПУ - Дизайн - Управление дизайном CSS -

Итак - Стили:

*{
 margin:0;
 padding:0
}
#nav{
 font-size:0.7em;
 list-style-type:none;
 width:600px;
 height:25px;
 display:inline-block;
 background:#355C96;
 line-height:25px
}
 #nav li{
 float:left;
 width:120px;
 margin-top:-10000px
 }
 #nav li a{
 width:120px;
 text-decoration:none;
 text-align:center;
 color:#fff;
 position:relative;
 float:left;
 margin-right:-119px;
 margin-top:10000px
 }
 #nav li a:hover, #content #nav li a:focus, #content #nav li a:active{
 background:#DCE2FC;
 margin-right:0;
 color:#355C96
 }
 #nav li ul{
 background:#6286BD;
 float:left;
 margin-top:-25px;
 padding-top:25px;
 margin-bottom:-10000px;
 list-style-type:none
 }
 #nav li ul li{
 float:none;
 margin:0;
 width:auto
 }
 #nav li ul li a{
 float:none;
 display:block;
 margin:0;
 margin-right:-1px;
 background:#6286BD
 }

Редактируя стили, помните, что меню легко «поломать».

Я просто скопировала этот код, и вставила его в конце страницы в стилях CSS ниже
/* ====== forum End ====== */

А затем начала изменять цвет и размеры меню

background:#355C96; на  background: #003366;

color: #FFFFFF; и т.д.

Эти значения вы также можете заменить на свои

ширину - width:600px; на width:250px; ширина меню

Что бы получился такой же цвет и размер как на скриншоте, можно скопировать и вставить этот код:

/* CSS Document_Menu */
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 240px;
list-style: none;
}

ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
border:#44aaee 1px solid;
}
ul#navmenu-v li ul li {
border:none;
border-bottom:#FFFFFF 2px solid;
}

/* Root Menu */
ul#navmenu-v a {
padding: 0 6px;
display: block;
background: #44aaee;
color: #FFFFFF;
font: bold 12px/28px Verdana, Arial;
text-decoration: none;
height: auto !important;
height: 1%;
}

ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
background: #FFFFFF;
color: #000000;

}

/* 2nd Menu */
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #44aaee;
color: #FFFFFF;
border:#44aaee 1px solid;
}

ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #FFFFFF;
color: #44aaee;
border:#44aaee 1px solid;
}

ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
right: 242px;
}

ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}

/* END CSS menu */

Посмотреть как выглядит меню в действии и в этом дизайне, можно вот здесь

- http://www.too-tek.kz/

Если вы разберетесь в сути кода, то сможете самостоятельно менять и изменять цвет и размер по своему желанию, в любое удобное для вас время!!! :))

Да, еще - этот код, не работает в ИЕ! Эксплорер не отображает выпадающее меню, в этом браузере будет видно только основное меню!
"Выпадать" в ИЕ ничего не будет....
Но если учитывать, что ИЕ использует совсем небольшой процент пользователей... то можно все таки установить этот код для остальных браузеров

Источник: http://www.alexilin.ru/new-dropdown-menu/

Категория: Полезности | Добавил: Fantom (07.05.2011)

Просмотров: 5800 | Комментарии: 1 | Рейтинг: 0.0/ 0

Всего комментариев: 1

Порядок вывода комментариев:

1 rusbitor.in (11.05.2012 21:58)

Rusbitor.in-Казахстанский торрент трекер!!!Бесплатный трафик для Мегалайнеров!!!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Новое на сайте

Самое популярное

Коды скрипты

Случайная статья

Чудо ферма \ Virtual farm 149

Именем короля 3. Коллекционное издание 146

Cities XL Platinum 2013 131

Браузер Maxthon 259

Download Master 5.12.1.1283 245

RIFT – многопользовательская онлайн игра 266

Улесье. Коллекционное издание 197

Будущее настоящего прошлого_скачать 400

Darck Orbit – браузерная игра 268

Articles – лучшая Wikipedia в кармане 238

iSendSMS - для отправки SMS и MMS 294

Lunascape 6.2 Универсальный браузер 250

Графический редактор PhotoFiltre 239

XnView Full-один из лучших просмотрщиков -конверторов графических файлов 297

Редактор Inedita 238

Govorilka 3.1 Rus Говорун_Скачать бесплатно 30178

FrontPage 2003 Русская версия 11781

Игра "Фараон и Клеопатра" скачать бесплатно 7077

Новый Супер Марио 4415

Mozilla Firefox 8.0.1 - русская версия скачать 4280

Игра в Длинные нарды 4085

Медитация для привлечения Любви 3831

Сборник_Программа настроев Г.Н.Сытина скачать 2969

FFrontPage 2007 Русская версия 2933

Авто выключение компьютера_WinMend Auto Shutdown 2717

Астрон Дизайн - 3D моделирование Вашего дома 2172

Спец эффекты с ВебКамерой 2161

Штука - игра в карты 1843

Программа для быстрого создания Flash-анимации 1625

Если хочешь быть счастливым - Литвак Михаил 1622

Отображаем информацию ваш браузер на uCoz 438

Оригинальная боковая панелька 563

Красивая кнопка вверх для блога, сайта 395

Статистика сайта для uCoz 537

Форма поиска сайта с переключателем с yandex и google 651

Радио FreshClub 357

Светлый юкозовский мини профиль 706

Светлый мини-чат для uCoz 777

Последние ответы на форуме в блоке для ucoz 743

Стрелка вверх 505

Темный информер Самые Популярные Темы для uCoz 387

Часы для uCoz 726

Игра на мышление 320

Радио для сайта new 755

Раздвижная форма поиска для uCoz 554

Топ пользователей для сайта ucoz 319

Коте для вашего сайта 320

Игра на мышление 320

Перевод сайта на 7 языков 320

Полная статистика Ucoz 323

Скрипт набор персонала для ucoz 324

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

Радио v.2 для сайта 324

Мелхиседек _Книга скачать 533

Будущее настоящего прошлого_скачать 400

Шпаргалки по философии_книга скачать 588

iSendSMS - для отправки SMS и MMS 294

Если хочешь быть счастливым - Литвак Михаил 1622

RIFT – многопользовательская онлайн игра 266

Медитация на свет 538

Внимание!

ВСЕ скачанные файлы с интернета, (и с нашего сайта, так же) перед запуском на своем компьютере рекомендуется ОБЯЗАТЕЛЬНО проверить Вашей антивирусной программой!
Все файлы и программы взяты с интернет пространства.
Администрация сайта не несет никакой ответственности за использование и последствия данных программ и файлов

Вверх Главная Регистрация RSS

Приветствую Вас, Гость

Веб Мастеру [2]	Ликбез [2]
Партнерки [2]	Полезности [11]
Уроки по Укос [7]	Фоны [1]
Windows [4]	WordPress [1]
Мои статьи [3]	3 [0]