Выпадающее Меню (CSS)


Выпадающее Меню (CSS)

2008
8.2 из 10
Проголосовало: 7




  • Скачать с сервера
  • Скачать
  • Смотреть демо


Всем доброе время суток.

И так, к вашему вниманию хочу предоставить - Выпадающее Меню CSS для uCoz

И так давайте приступим к установке данной модификации

Для начала вам нужно скачать архив после чего заливаем его в файловый менеджер

Идем дальше.

И так между <head> и </head>

Ставим

Code

<link rel="stylesheet" type="text/css" href="css/layout-min.css" />  
  <link rel="stylesheet" type="text/css" href="css/multiMenu-min.css" />  
  <link rel="stylesheet" type="text/css" href="css/switcherMenu-min.css" />  
  <link rel="stylesheet" type="text/css" href="css/splitMenu-min.css" />


Теперь приступим к установке - Многоуровневое меню

(все устанавливается между <body>)

И так ставим сам код

Code

<div class="fourCol alignRight">  
   
   
  <ul class="multiMenu">  
  <li>  
  <a href="#" class="level-1">Ссылка 1</a>  
   
  <ul class="right">  
  <li><a href="#">Подменю 1</a></li>  
   
  <li>  
  <a href="#" class="level-n">Подменю 2</a>  
   
  <ul>  
  <li><a href="#">Подменю 1</a></li>  
  <li><a href="#">Подменю 2</a></li>  
   
  <li><a href="#" class="level-n">Подменю 3</a>  
   
  <ul>  
  <li><a href="#">Подменю 1</a></li>  
  <li><a href="#">Подменю 2</a></li>  
  </ul>  
   
  </li>  
   
  </ul>  
   
  </li>  
   
  </ul>  
   
  </li>  
   
  <li><a href="#">Ссылка 2</a></li>  
  <li>  
  <a href="#" class="level-1">Ссылка 3</a>  
   
  <ul class="left">  
  <li><a href="#">Подменю 1</a></li>  
   
  <li>  
  <a href="#" class="level-n">Подменю 2</a>  
   
  <ul>  
  <li><a href="#">Подменю 1</a></li>  
  <li><a href="#" class="level-n">Подменю 2</a>  
   
  <ul>  
  <li><a href="#">Подменю 1</a></li>  
  <li><a href="#">Подменю 2</a></li>  
  </ul>  
   
  </li>  
   
  <li><a href="#">Подменю 3</a></li>  
   
  </ul>  
   
  </li>  
   
  </ul>  
   
  </li>  
  </ul>


ну вот и все, все # меняем на свои ссылки ну и понятное дело что текст на свой меняем.....

И так теперь приступим к установке - Реклама сайтов в сплывающем меню

Code

<div class="switcherMenu">  
   
  <ul class="dropdown">  
  <li><a href="здесь ставим свою ссылку"><img src="img/switcherMenu/youtube.png" width="48" height="35" /> youtube</a></li>  
  <li><a href="здесь ставим свою ссылку" class="active"><img src="img/switcherMenu/uface.png" width="48" height="31" /> uFace</a></li>  
  <li><a href="здесь ставим свою ссылку"><img src="img/switcherMenu/webo4ka.png" width="48" height="44" /> webo4ka</a></li>  
  <li><a href="здесь ставим свою ссылку"><img src="img/switcherMenu/read.gif" width="48" height="32" /> зароботок</a></li>  
  <li><a href="здесь ставим свою ссылку"><img src="img/switcherMenu/punish.gif" width="48" height="30" /> реклама</a></li>  
  </ul>  
   
  </div>


тут собственно тоже все меняем на свое (текст и ссылки)

теперь приступаем к установке - Сплит меню

Code

  <div class="splitMenu">  
   
  <a href="#" class="mainLink">  
  <img src="img/splitMenu/icon.png" width="26" height="28" /> Настройки  
  </a>  
   
   
   
  <div class="toggle">  
   
  <ul class="dropdown">  
  <li><a href="#profile"><img src="img/splitMenu/icon1.png" width="21" height="12" /> Мой Профиль</a></li>  
  <li><a href="#downloads"><img src="img/splitMenu/icon2.png" width="21" height="14" /> Загрузка</a></li>  
  <li><a href="#security"><img src="img/splitMenu/icon3.png" width="21" height="14" /> Безопасность</a></li>  
  <li><a href="#preferences"><img src="img/splitMenu/icon4.png" width="21" height="14" /> Предпочтения</a></li>  
  </ul>  
   
  </div>  
   
  </div>


ну вот и все и завершили установку..

И так тут нет не чего сложного если ты понимаешь в CSS стилях то ты данную модификацию
сделаешь как тебе надо, если ты не понимаешь не чего в стилях то наш тебе совет не лезьте вообще туда
в стили так как вам там нечего делать.....

И так данная функциональность сделана только на CSS не каких JS тут не присутствует.....

Демо можно посмотреть - тут

Удачного использования..

Релиз подготовил - lekus
Автор публикации: Загрузка
Загрузка
LeKcUs, это его n материал
Источник: http://uface.at.ua/
  • Всего комментариев: 4

Aleks
+1
Aleks написал: Написано 08 Апреля 2012 в 07:52
Комментарий №4
супер !

Ferest
+4
Ferest написал: Написано 05 Апреля 2012 в 05:57
Комментарий №2
Мне очень понравилась меню!Такое меню явно заслуживает стоять где нибуть у мееня на сайте!Автору +!

DaRkILer
+2
DaRkILer написал: Написано 04 Апреля 2012 в 20:53
Комментарий №1
Отличная менюшка!

BLAzER
+1
BLAzER написал: Написано 05 Апреля 2012 в 20:17
Комментарий №3
Угу, классно!

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 1
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: