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

2142
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 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Радио не стоит на месте новая версия вам 1.5:
    Что нового:
    1. Media Session - позволит вам переключать из бара браузера радио, а также на блоке экрана.
    2. Новые радиостанции.
    3. Новый API код.

    Демо: fiddle
    Реальная полная версия: woobl
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
    Последние темы
    Опрос
    258
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: