Воскресенье, 24.09.2017, 04:15


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


Радио ТРАНС
Игротека
Наш опрос
Чего желаете?
Всего ответов: 84
Статистика
Яндекс.Метрика Яндекс.Метрика

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

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

 

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

 

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

 

 Коды скрипты

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

  • Cities XL Platinum 2013 71
  • Чудо ферма \ Virtual farm 86
  • Именем короля 3. Коллекционное издание 87
  • Браузер Maxthon 188
  • Download Master 5.12.1.1283 177
  • Articles – лучшая Wikipedia в кармане 172
  • Улесье. Коллекционное издание 146
  • RIFT – многопользовательская онлайн игра 202
  • Будущее настоящего прошлого_скачать 334
  • Darck Orbit – браузерная игра 193
  • iSendSMS - для отправки SMS и MMS 227
  • Lunascape 6.2 Универсальный браузер 181
  • Редактор Inedita 170
  • Бизнес Пак - бесплатно 270
  • Графический редактор PhotoFiltre 219

  • Govorilka 3.1 Rus Говорун_Скачать бесплатно 29787
  • FrontPage 2003 Русская версия 11604
  • Игра "Фараон и Клеопатра" скачать бесплатно 6854
  • Mozilla Firefox 8.0.1 - русская версия скачать 4210
  • Новый Супер Марио 4127
  • Игра в Длинные нарды 4050
  • Медитация для привлечения Любви 3755
  • Сборник_Программа настроев Г.Н.Сытина скачать 2895
  • FFrontPage 2007 Русская версия 2816
  • Авто выключение компьютера_WinMend Auto Shutdown 2659
  • Астрон Дизайн - 3D моделирование Вашего дома 2112
  • Спец эффекты с ВебКамерой 2093
  • Штука - игра в карты 1757
  • Программа для быстрого создания Flash-анимации 1519
  • Если хочешь быть счастливым - Литвак Михаил 1498

  • Необычный вид комментариев 273
  • Переводчик для сайта (PROMT) 291
  • Топ юзеров для Ucoz 475
  • Флэш игра для сайта 260
  • Аудиоплеер с плейлистом для mp3 музыки 362
  • Летающая птичка твиттера 324
  • Блок - место свободно 381
  • Скрипт последних комментариев для Ucoz 323
  • Форма поиска для Ucoz 334
  • Вид комментариев для uCoz v.5 257
  • Радио в стиме mp3 плеера 273
  • Набор файловиков. (выдвижное меню) 283
  • Простой мини профиль для uCoz 260
  • Кнопка мне нравится без PHP с видом как Facebook 344
  • Информер Случайные новости для uCoz 386

  • Мини профиль с временем суток и функциональным меню 256
  • Коте для вашего сайта 256
  • FM радио - отличная музыка в хорошем качестве 256
  • Пожертвование на развитие сайта. 256
  • Кнопка "Вверх" для сайта, блога или форума 256
  • Флэш проигрыватель с большим количеством радиостанций.. 256
  • Последние комментарии ucoz 257
  • Вид комментариев для uCoz v.5 257

  • Как извлечь музыку из видео 382
  • Браузерная онлайн игра Deepolis 170
  • Космические стрелялки 6 шт 200
  • Программа для быстрого создания Flash-анимации 1519
  • Формула богатства-Рене Эгли 472
  • Медитация для привлечения Любви 3755
  • Firefox 6.0.1. загрузить 313


  • Внимание!

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

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