Пятница, 26.05.2017, 04:53


Вниз Главная Регистрация RSS
Приветствую Вас, Гость


Радио ТРАНС
Игротека
Наш опрос
Оцените мой сайт
Всего ответов: 87
Статистика
Яндекс.Метрика Яндекс.Метрика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Друзья сайта
Главная » Статьи » Полезности

Выпадающее меню в Укоз


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





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

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

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

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

<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)
Просмотров: 5116 | Комментарии: 1 | Теги: выпадающее меню | Рейтинг: 0.0/ 0
Всего комментариев: 1
1  
Rusbitor.in-Казахстанский торрент трекер!!!Бесплатный трафик для Мегалайнеров!!!

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

 

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

 

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

 

 Коды скрипты

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

  • Cities XL Platinum 2013 65
  • Чудо ферма \ Virtual farm 82
  • Именем короля 3. Коллекционное издание 83
  • Браузер Maxthon 182
  • Улесье. Коллекционное издание 143
  • Articles – лучшая Wikipedia в кармане 155
  • Download Master 5.12.1.1283 171
  • RIFT – многопользовательская онлайн игра 197
  • Darck Orbit – браузерная игра 189
  • Будущее настоящего прошлого_скачать 328
  • iSendSMS - для отправки SMS и MMS 220
  • Lunascape 6.2 Универсальный браузер 173
  • Редактор Inedita 165
  • Бизнес Пак - бесплатно 267
  • Графический редактор PhotoFiltre 212

  • Govorilka 3.1 Rus Говорун_Скачать бесплатно 29633
  • FrontPage 2003 Русская версия 11550
  • Игра "Фараон и Клеопатра" скачать бесплатно 6786
  • Mozilla Firefox 8.0.1 - русская версия скачать 4208
  • Новый Супер Марио 4118
  • Игра в Длинные нарды 4044
  • Медитация для привлечения Любви 3743
  • Сборник_Программа настроев Г.Н.Сытина скачать 2882
  • FFrontPage 2007 Русская версия 2794
  • Авто выключение компьютера_WinMend Auto Shutdown 2654
  • Астрон Дизайн - 3D моделирование Вашего дома 2109
  • Спец эффекты с ВебКамерой 2090
  • Штука - игра в карты 1702
  • Программа для быстрого создания Flash-анимации 1514
  • Если хочешь быть счастливым - Литвак Михаил 1458

  • Игровое онлайн радио Tort.FM 357
  • Новый вид комментариев v.1.0 + Модер-панель для uCoz 267
  • Как сделать топ пользователей,по количеству файлов,и постов 244
  • Флэш игра для сайта 245
  • Статистика для системы ucoz 295
  • Вид информера 258
  • Кнопка рейтинга + и - 252
  • Летающая птичка твиттера 309
  • Раздвижная форма поиска для uCoz 483
  • Скрипт светлый вид материалов файлов для uCoz 255
  • Уникальная кнопка Scroll To Top (наверх) для сайта 330
  • Скрипт Переводчик от Microsoft 351
  • Лента комментариев 337
  • Cкрипт подробной статистики сайта 347
  • Перевод страниц сайта 262

  • FM радио - отличная музыка в хорошем качестве 238
  • Флэш проигрыватель с большим количеством радиостанций.. 238
  • Новый вид соотношения гостей и пользователей 239
  • Перевод на другие языки для uCoz 239
  • Скрипт набор персонала для ucoz 239
  • Радио на вашем сайте 240
  • Новый цветной вид опроса v.2.0 uCoz 240
  • 7 каналов радиостанций высочайшего уровня на любой вкус! 240

  • Игра в Длинные нарды 4044
  • Открой в себе художника 610
  • Психоактивная аудиопрограмма От лени 498
  • Формула богатства-Рене Эгли 460
  • WinToFlash_запись образа операционной системы Windows на флешку 364
  • DriverPack Solution - автоматическая установка драйверов 611
  • Just Gestures - менеджер жестов 370


  • Внимание!

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

    Вверх Главная Регистрация RSS
    Приветствую Вас, Гость