Скрипт Красивое выдвижное горизонтальное меню by waror для uCoz - Скрипты для uCoz - Скрипты для uCoz, Шаблоны для uCoz, Видео Уроки, Статьи - скрипты, шаблоны, видео уроки, статьи, иконки, кнопки
Суббота, 20.04.2024, 15:15
Приветствую Вас Гость | RSS

Скрипты, Шаблоны, Уроки для uCoz

Главная | Регистрация | Вход
Меню сайта
Категории раздела
Скрипты для uCoz [1038]
Другие скрипты [3]
Программы/Софт [15]
Шаблоны для uCoz [363]
Другие шаблоны [0]
Видео Уроки по uCoz [70]
Иконки для uCoz [16]
Кнопки для uCoz [7]
Статьи по uCoz [1]
Другое [7]
Реклама
Наш опрос
Что Вы ищите на сайте?
Результаты | Архив опросов
Всего ответов: 240
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Логин:
Пароль:

Скрипты для uCoz, Шаблоны для uCoz, Видео Уроки, Статьи

Главная » Файлы » Скрипты для uCoz
Скрипт Красивое выдвижное горизонтальное меню by waror для uCoz
11.03.2010, 21:13

Установка:
1) Создаем папку images и заливаем туда картинки из одноименной папки в архиве.
2) Скрипт jquery заливаем в корень сайта.
3) Между тегами
Code
<head>и</head>

вствляем весь следующий скрипт
Code

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
   
  $("ul.subnav").parent().append("<span></span>");  
   
  $("ul.topnav li span").click(function() {  
   
  $(this).parent().find("ul.subnav").slideDown('fast').show();  
   
  $(this).parent().hover(function() {  
  }, function(){  
  $(this).parent().find("ul.subnav").slideUp('slow');  
  });  
   
  }).hover(function() {  
  $(this).addClass("subhover");  
   
  $(this).removeClass("subhover");  
  });  
   
});  
</script>  
<style type="text/css">  
body {  
  margin: 0; padding: 0;  
  font: 10px normal Arial, Helvetica, sans-serif;  
  background: #ffffff repeat-x;  
}  
.container {  
  width: 960px;  
  margin: 0 auto;  
  position: relative;  
}  
#header .disclaimer {  
  color: #999;  
  padding: 100px 0 7px 0;  
  text-align: right;  
  display: block;  
  position: absolute;  
  top: 0; right: 0;  
}  

ul.topnav {  
  list-style: none;  
  padding: 0 20px;  
  margin: 0;  
  float: left;  
  width: 920px;  
  background: #222;  
  font-size: 1.2em;  
  background: url(images/topnav_bg.gif) repeat-x;  
}  
ul.topnav li {  
  float: left;  
  margin: 0;  
  padding: 0 15px 0 0;  
  position: relative;  
}  
ul.topnav li a{  
  padding: 10px 5px;  
  color: #fff;  
  display: block;  
  text-decoration: none;  
  float: left;  
}  
ul.topnav li a:hover{  
  background: url(images/topnav_hover.gif) no-repeat center top;  
}  
ul.topnav li span {  
  width: 17px;  
  height: 35px;  
  float: left;  
  background: url(images/subnav_btn.gif) no-repeat center top;  
}  
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}  
ul.topnav li ul.subnav {  
  list-style: none;  
  position: absolute;  
  left: 0; top: 35px;  
  background: #333;  
  margin: 0; padding: 0;  
  display: none;  
  float: left;  
  width: 170px;  
  -moz-border-radius-bottomleft: 5px;  
  -moz-border-radius-bottomright: 5px;  
  -webkit-border-bottom-left-radius: 5px;  
  -webkit-border-bottom-right-radius: 5px;  
  border: 1px solid #111;  
}  
ul.topnav li ul.subnav li{  
  margin: 0; padding: 0;  
  border-top: 1px solid #252525;  
  border-bottom: 1px solid #444;  
  clear: both;  
  width: 170px;  
}  
html ul.topnav li ul.subnav li a {  
  float: left;  
  width: 145px;  
  background: #333 url(images/dropdown_linkbg.gif) no-repeat 10px center;  
  padding-left: 20px;  
}  
html ul.topnav li ul.subnav li a:hover {  
  background: #222 url(images/dropdown_linkbg.gif) no-repeat 10px center;  
}  
#header img {  
  margin: 20px 0 10px;  
}  
</style>

4) В нужном месте вставляем скрипт самого меню:

Code

<div class="container">  
  <div id="header">  
  <ul class="topnav">  
  <li><a href="$HOME_PAGE_LINK$">Главная</a></li>  
  <li>  
  <?if($USER_LOGGED_IN$)?><a href="$PERSONAL_PAGE_LINK$">$USERNAME$</a>  
  <ul class="subnav">  
  <li><a href="$PM_URL$">Личные сообщения ($UNREAD_PM$)</a></li>  
  <li><a href="$USERS_LIST_URL$">Все пользователи</a></li>  
  <li><a href="$LOGOUT_LINK$">Выход</a></li>  
  </ul>  
  <?else?>  
  <a href="$LOGIN_LINK$">Зарегистрируйтесь или войдите!</a>  
  <?endif?>  
  </li>  
  <li>  
  <a href="/forum">Форум</a>  
   
  </li>  
  <li><a href="/publ">Статьи</a>  
  </li>  
  <li><a href="/blog">Блог</a></li>  
  <li><a href="/load">Файлы</a></li>  
  <li><a href="/photo">Фото</a></li>  
  <li><a href="/gb">Гостевая книга</a></li>  
  <li><a href="/index/0-2">О нас</a></li>  
  </ul>  
  </div>  
</div>
[code]

Инструкция по редоктированию меню:  
Что бы удалить какой либо пункт меню найдите его в скрипте и удалите вместе с тегами
[code]
<li> ... </li>

Что бы добавить новый пункт меню вставьте в нужном месте

Code

<li><a href="ссылка">Пункт</li>

Что бы добавить новый пункт с подменю вставьте в нужном месте:

Code

<li><a href="ссылка">меню</a>  
  <ul class="subnav">  
  <li><a href="ссылка">подменю</a></li>  
  <li><a href="ссылка">подменю</a></li>  
  <li><a href="ссылка">подменю</a></li>  
  </ul> </li>





Скачать Скрипт Красивое выдвижное горизонтальное меню by waror для uCoz
Зеркало Скрипт Красивое выдвижное горизонтальное меню by waror для uCoz


Источник:
Категория: Скрипты для uCoz | Добавил: z10y4el
Просмотров: 5173 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Зачекай
Поиск
Скрипты для uCoz
Шаблоны для uCoz
Друзья сайта
  • кино онлайн
  • мониторинг серверов
  • тексты песен
  • MSTS портал
    		•
    Copyright скрипты для ucoz © 2024
    Хостинг от uCoz
    ucoz — это бесплатная система управления сайтом и хостинг для сайтов. ucoz сайты - это просто, удобно и быстро. Здесь вы можете создать бесплатные сайты на любую из интересующих вас тем, домен и хостинг предоставляются также бесплатно. На нашем сайте вы найдете скрипты для ucoz для удобства оформления вашего сайта. Кроме того, мы предлагаем на ваш выбор шаблоны для ucoz по различной тематике и цветовой гамме. Выбор темы для ucoz зависит только от вас. Это могут быть такие дизайны для ucoz, как природа, недвижимость, музыка, игры, транспорт, спорт и многие другие. Также вы можете найти различные виды меню для ucoz, чтобы улучшить внешний вид вашего сайта. Для создания особого стиля вашего сайта и для того, чтобы соответствовать основной тематике, у нас вы можете найти шапки для ucoz. Если у вас возникнут какие-либо трудности в создании сайтов, смотрите видео уроки для ucoz. При необходимости вы можете скачать видео уроки на нашем сайте. Конструктор ucoz, предлагаемый нашим сайтом, позволяет даже новичку создать хороший сайт с большими возможностями. Мы желаем вам успехов в создании сайтов с помощью script.ucoz.lv.