Скрипт горизонтального ниспадающего навигационного меню (css+html)

Поделиться12010-01-23 23:53:26

Автор: Герда
Помощник ZeroParking
Откуда: Москва
Зарегистрирован: 2007-12-24
Приглашений: 0
Сообщений: 604
Уважение: +84
Позитив: +50
Пол: Женский
Возраст: 34 [1990-05-17]
Провел на форуме:
7 дней 11 часов
Последний визит:
2013-05-20 10:26:14

Я в свое время очень долго искала такую вещь, но пришлось самой креативить, писать почти с нуля, пролистывая информацию про аналоги в интернете.
Поэтому выкладываю эту вещицу, чтобы у других было меньше проблем.

Меню получилось просто замечательным: стилизованное, при наведении курсора цвет фона или ссылки меняется, аккуратные окошки выпадают при наведении и т.п.

______________________
Скриншот меню:

______________________

Преимущества этого меню:
1. Оно горизонтальное. (в тырнете очень много подобных вертикальных, но они для меня не подходят)
2. Оно настраиваемое стилистически (чего нет во многих навигаторах)
3. Оно при отсутствии криворукости админа может содержать в себе великое разнообразие пунктов и вкладок.
4. Его css-код никак не сказывается на стиле и само оно с движком форума не конфликтует. (я находила готовые аналоги, которые либо стиль портили, либо "не дружили" с форумными элементами)

Недостаток - скрипт не просто освоить новичкам в администрировании.

Однако настроить этот скрипт для своего форума без знаний html и css не получится.

Добавляем в style.css:

/* E1 infomenu
-------------------------------------------------------------*/

#nav {padding:0; margin:0; list-style:none; height:35px; background-image: url(картинка); repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#цвет; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(картинка) no-repeat right top;}

#nav li:hover a.top_link,
#nav li.iehover a.top_link {color:#цвет; background: url(картинка) no-repeat; cursor:pointer;}
#nav li:hover a.top_link span,
#nav li.iehover a.top_link span {background:url(картинка) no-repeat right top; cursor:pointer;}
#nav li:hover a.top_link span.down,
#nav li.iehover a.top_link span.down {background:url(картинка) no-repeat right top; cursor:pointer;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200; cursor:pointer;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #цвет; padding:3px; border:1px solid #цвет; white-space:nowrap; width:160px; height:auto; z-index:300; cursor:pointer;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:150px; font-weight:normal; cursor:pointer;}

#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:160px; line-height:18px; text-indent:5px; color:#цвет; text-decoration:none;border:1px solid #цвет; cursor:pointer;}

#nav li ul.sub li a.fly
{background:#цвет url(картинка) 150px 6px no-repeat; cursor:pointer;}
#nav li:hover ul.sub li a:hover
{background-image: url(картинка); color:#цвет; border-color:#цвет; cursor:pointer;}

#nav li:hover ul.sub li a.fly:hover
{background:#цвет url(картинка) 150px 6px no-repeat; color:#цвет; cursor:pointer;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:155px; top:-4px; background: #цвет; padding:3px; border:1px solid #цвет; white-space:nowrap; width:160px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#цвет url(картинка) 150px 6px no-repeat; color:#цвет; border-color:#цвет;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#цвет url(картинка) 150px 6px no-repeat; color:#цвет; border-color:#цвет;}

Все, отмеченное красным, можете править под свой стиль. С остальным лучше не эксперементировать.

Добавляется в то место, где вы хотите расположить меню:

<ul id="nav">

<li class="top"><a href="ссылка" class="top_link"><span>НА ГЛАВНУЮ</span></a></li>

<li class="top"><a href="" id="" class="top_link"><span class="down">FAQ</span></a>

<ul class="sub">
<li><a href="ссылка">Вопрос-ответ</a></li>

<li><a href="" class="fly">Где заказывать?</a>
<ul>
<li><a href="ссылка">Стили</a></li>
<li><a href="ссылка" class="fly">Элементы стиля</a>
<ul>
<li><a href="ссылка">Шапки</a></li>
<li><a href="ссылка">Картинки для меп-карт</a></li>
<li><a href="ссылка">Картинки</a></li>
<li><a href="ссылка">Фоны</a></li>
<li><a href="ссылка">Иконки</a></li>
<li><a href="ссылка">Смайлы</a></li>
<li><a href="ссылка">Награды</a></li>
<li><a href="ссылка">Кнопки</a></li>
<li><a href="ссылка">Заголовки</a></li>
<li><a href="ссылка">Курсоры</a></li>
</ul>
</li>
<li><a href="ссылка" class="fly">Рекламные элементы</a>
<ul>
<li><a href="ссылка">Картинки</a></li>
<li><a href="ссылка">Логотипы</a></li>
<li><a href="ссылка">Баннеры</a></li>
</ul>
</li>

<li><a href="ссылка" class="fly">Элементы профиля</a>
<ul>
<li><a href="ссылка">Аватарки</a></li>
<li><a href="ссылка">Юзербары</a></li>
<li><a href="ссылка">Подписи</a></li>
<li><a href="ссылка">Комплекты</a></li>
</ul>
</li>
<li><a href="ссылка" class="fly">HTML-заказы</a>
<ul>
<li><a href="ссылка">Таблицы</a></li>
<li><a href="ссылка">Мэп-карты</a></li>
</ul>
</li>
</ul>
</li>
<li class="mid"><a href="ссылка">Навигация</a>
</li>
</ul>
</li>
<li class="top"><a href="" id="" class="top_link"><span class="down">О НАС</span></a>
<ul class="sub">
<li><a href="ссылкаi">Наши принципы</a></li>
<li><a href="ссылка"> Администрация проекта</a></li>
<li><a href="ссылка" class="fly">Правила форума</a>
<ul>
<li><a href="ссылка">Этика</a></li>
<li><a href="ссылка">Общение</a></li>
<li><a href="ссылка">Заказы</a></li>
<li><a href="ссылка">Реклама</a></li>
</ul>
</li>
<li><a href="ссылка" class="fly">Галерея</a>
<ul>
<li><a href="ссылка">Стили</a></li>
<li><a href="ссылка">Шапки</a></li>
<li><a href="ссылка">Картинки</a></li>
<li><a href="ссылка">Баннеры</a></li>
<li><a href="ссылка">Аватарки</a></li>
</ul>
</li>
</ul>
</li>
<li class="top"><a href="" id="" class="top_link"><span class="down">ПАРТНЕРСТВО</span></a>
<ul class="sub">
<li><a href="" class="fly">О рекламе</a>
<ul>
<li><a href="ссылка">Правила</a></li>
<li><a href="ссылка">Обмен рекламой</a></li>
<li><a href="ссылка">Баннерообмен</a></li>
<li><a href="ссылка">Элит-реклама</a></li>
<li><a href="ссылка">НАШ БАННЕР</a></li>
<li><a href="ссылка">НАША РЕКЛАМА</a></li>
</ul>
</li>
<li><a href="ссылка">ПАРТНЕРСКАЯ ПРОГРАММА</a></li>
</ul>
</li>
<li class="top"><a href="" id="" class="top_link"><span class="down">ПОМОЩЬ ФОРУМУ</span></a>
<ul class="sub">
<li><a href="ссылка">Вакансии</a></li>
<li><a href="ссылка">Продвижение</a></li>
<li><a href="">Финансовая помощь</a></li>
</ul>
</li>
<li class="top"><a href="" id="" class="top_link"><span class="down">ВАЖНОЕ</span></a>
<ul class="sub">
<li><a href="ссылка">Объявления</a></li>
<li><a href="ссылка">Конкурсы</a></li>
<li><a href="ссылка">Новости</a></li>
</ul>
</li>
</ul>

тут вы сами себе творцы, ибо под ваш форум, придется полностью переделывать эту часть меню, а не только вставлять ссылки и менять названия пунктов.

пример такого меню можно посмотреть у меня на форуме.

Отредактировано Герда (2010-01-23 23:56:44)

+4

Поделиться22010-01-24 01:12:06

Автор: Kanabis877
Помощник ZeroParking
Откуда: от туда
Зарегистрирован: 2009-03-22
Приглашений: 0
Сообщений: 889
Уважение: +127
Позитив: +6
Пол: Мужской
Возраст: 33 [1991-11-04]
Провел на форуме:
27 дней 22 часа
Последний визит:
2014-12-03 14:56:31

не знаю как остальные но я бы воспользовался вот этим меню) оно мне как- то больше по душе))
итак HTML-верх

Код:

<style type="text/css">
#nav, #nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
  background: #515151;
  float: left;
  width: 100%;
}
#nav li {
  float: left;
  position: relative;
  background: #515151;
  back\ground: none;
}
#nav li ul {
  display: none;
  position: absolute;
  background: url(http://beholder-eye.info/example/dropdown/fone-tr.png);
  padding: 8px 0;
  width: 138px;
}
#nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 120px;
  padding: 4px 10px;
  background: url(http://beholder-eye.info/example/dropdown/dot.png) repeat-y right;
}
#nav a:hover {
  color: #000;
  background: #ccc;
}
#nav li:hover {
  background: #333;
}
#nav li li a {
  width: 118px;
  background: none;
}
#nav li:hover ul {
  display: block;
}
#nav li:hover li ul {
  display: none;
  width: 138px;
  top: -9px;
  left: 133px;
}
#nav li:hover li:hover ul {
  display: block;
}
</style>

Объявление:

Код:

<ul id="nav">
  <li><a href="#null">Домой</a></li>
  <li><a href="#null">Каталог</a>
    <ul>
      <li><a href="#null">Вся продукция</a>
        <ul>
          <li><a href="#null">По дате</a></li>
          <li><a href="#null">Производители</a></li>
          <li><a href="#null">Другое</a></li>
        </ul>
      </li>
    </ul>
  </li>
  ...
</ul>

<a href="#null">-заменяем на ссылку)

пример работы вот здесь:
http://beholder-eye.info/example/dropdown/
взято от- туда же
http://beholder-eye.info/2006/03/30/dropdown-menu-css

+1

Поделиться32010-01-24 14:09:13

Автор: zhele
Форумчанин
Откуда: Москва
Зарегистрирован: 2009-05-29
Приглашений: 0
Сообщений: 125
Уважение: +10
Позитив: +13
Пол: Мужской
Возраст: 51 [1973-11-29]
Провел на форуме:
9 дней 12 часов
Последний визит:
2010-07-24 12:11:34

Всем привет! Спасибо за скрипт! А не подскажите, как это меню вставить вместо стандартных строк - * Новые сообщения* Активные темы* Темы без ответов * Мои сообщения * Подписка* Все прочитано? Если нет такой возможности, то как её убрать?Вопрос не втему, на всякий случай, а то очень много менюшек плодится на моём форуме, хотелось бы оставить самое необходимое.
Заранее Спасибо!

Отредактировано zhele (2010-01-24 14:32:55)

0

Поделиться42010-01-28 03:56:00

Автор: Герда
Помощник ZeroParking
Откуда: Москва
Зарегистрирован: 2007-12-24
Приглашений: 0
Сообщений: 604
Уважение: +84
Позитив: +50
Пол: Женский
Возраст: 34 [1990-05-17]
Провел на форуме:
7 дней 11 часов
Последний визит:
2013-05-20 10:26:14

немного не поняла...
вы хотите убрать с форума стандартное меню пользователя и вставить его в скрипт горизонтального меню?

0

Поделиться52010-02-28 13:12:05

Автор: ~Джиерда~
Форумчанин
Откуда: Город, которого нет
Зарегистрирован: 2009-08-07
Приглашений: 0
Сообщений: 169
Уважение: +4
Позитив: +27
Пол: Женский
Провел на форуме:
1 день 23 часа
Последний визит:
2011-04-09 17:01:40

Kanabis877 написал(а):

оно мне как- то больше по душе

С этим скриптом я ничего не поняла. Куда засовывать текст, который будет вываливаться при наведении курсора на ссылку? И код для объявления... в какую часть самого объявления его засовывать?

0

Поделиться62010-02-28 13:17:10

Автор: zhele
Форумчанин
Откуда: Москва
Зарегистрирован: 2009-05-29
Приглашений: 0
Сообщений: 125
Уважение: +10
Позитив: +13
Пол: Мужской
Возраст: 51 [1973-11-29]
Провел на форуме:
9 дней 12 часов
Последний визит:
2010-07-24 12:11:34

Посмотрите внимательно пример,который привёл Kanabis877, и всё поймёте. А само меню вставляете в Объявление, там, где Вам это необходимо.

0

Поделиться72010-02-28 13:45:16

Автор: ~Джиерда~
Форумчанин
Откуда: Город, которого нет
Зарегистрирован: 2009-08-07
Приглашений: 0
Сообщений: 169
Уважение: +4
Позитив: +27
Пол: Женский
Провел на форуме:
1 день 23 часа
Последний визит:
2011-04-09 17:01:40

У меня стала выпадать моя таблица, только полу-прозрачная и вся в дырках))) Ничего не получается. ~~Можно как следует (с рисунками и т. д.) описать, и вы мне код выложите~~? :flirt:
уже разобралась.

Отредактировано Яра (2010-02-28 13:58:36)

0

Поделиться82010-02-28 13:51:59

Автор: zhele
Форумчанин
Откуда: Москва
Зарегистрирован: 2009-05-29
Приглашений: 0
Сообщений: 125
Уважение: +10
Позитив: +13
Пол: Мужской
Возраст: 51 [1973-11-29]
Провел на форуме:
9 дней 12 часов
Последний визит:
2010-07-24 12:11:34

Яра
Скрипт в посте №2, там же пример работы.Если всё правильно скопировали, то должно работать.Кстати Kanabis877 выложил скрипт меню,на которое Вы давали запрос в ЭТОЙ ТЕМЕ.

0

Поделиться92010-02-28 13:58:09

Автор: ~Джиерда~
Форумчанин
Откуда: Город, которого нет
Зарегистрирован: 2009-08-07
Приглашений: 0
Сообщений: 169
Уважение: +4
Позитив: +27
Пол: Женский
Провел на форуме:
1 день 23 часа
Последний визит:
2011-04-09 17:01:40

zhele, ясно... то есть у меня всё равно с этим ничего бы не получилось? ладно, спасибо, пошла мучить тот... :tired:

0

Поделиться102010-02-28 14:08:32

Автор: zhele
Форумчанин
Откуда: Москва
Зарегистрирован: 2009-05-29
Приглашений: 0
Сообщений: 125
Уважение: +10
Позитив: +13
Пол: Мужской
Возраст: 51 [1973-11-29]
Провел на форуме:
9 дней 12 часов
Последний визит:
2010-07-24 12:11:34

Кстати маленький ньюанс по скрипту из поста №2. При наезде ниспадающего окна на некоторые ссылки и элементы дизайна,оно прячется под них, с этим так и не разобрался. Пришлось нагромоздить пока кучу картинок под меню.Может, кто-нибудь подскажет.

0

Поделиться112010-03-09 16:47:57

Автор: НиктОм
Форумчанин
Зарегистрирован: 2009-11-02
Приглашений: 0
Сообщений: 72
Уважение: 0
Позитив: +3
Пол: Женский
Провел на форуме:
2 дня 6 часов
Последний визит:
2012-10-26 13:00:30

Мм....интересно

0

Поделиться122010-03-09 23:04:08

Автор: Romych
Странник
Зарегистрирован: 2010-02-14
Приглашений: 0
Сообщений: 107
Уважение: +67
Позитив: +4
Пол: Мужской
Провел на форуме:
1 день 4 часа
Последний визит:
2013-03-19 22:15:49

zhele написал(а):

При наезде ниспадающего окна на некоторые ссылки и элементы дизайна,оно прячется под них, с этим так и не разобрался.

это означает, что в выпадающих элементах меню z-index не достаточен
и его перекрывают другие элементы форума

попробуйте поставить z-index: 1000;
можно и поменьше

0

Поделиться132010-03-09 23:47:00

Автор: Romych
Странник
Зарегистрирован: 2010-02-14
Приглашений: 0
Сообщений: 107
Уважение: +67
Позитив: +4
Пол: Мужской
Провел на форуме:
1 день 4 часа
Последний визит:
2013-03-19 22:15:49

Герда написал(а):

вы хотите убрать с форума стандартное меню пользователя и вставить его в скрипт горизонтального меню?

кстати, такая возможность есть,
можно стандартное меню сделать выпадающим, а именно пункты имеющие много разделов Профиль Сообщения Администрирование
очень удобно для админов и модераторов,
в данном меню я применил эффект слайд, т.е. элементы выпадают плавно

для этого требуется фреймворк jQuery

если у вас установлен скрипт Спойлера, который здесь назван Очень красивым, то у вас уже установлени фреймворк,
а если нет, то вот он
в html-верх:

<script type="text/javascript" src="http://gettopup.lg1x8z.simplecdn.net/latest/jquery/all.js"></script>

<style type="text/css">
#pun-navlinks.section{
display: block;
z-index: 1000;
position: relative;
opacity: 0.9;
filter: alpha(opacity=90);
}
#pun-navlinks.section ul.container {
margin: 0px;
border: 0px;
padding: 0px;
list-style: none;
height: 24px;
}
#pun-navlinks.section ul.container, #pun-navlinks.section ul.container * {z-index: 1000;}
#pun-navlinks.section ul.container li {
margin: 0px 20px 0px 0px;
padding: 0px;
border: 0px;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}

#pun-navlinks.section ul.container ul {
margin: 0px;
border: 0px;
padding: 0px 0px 12px 0px;
width: 175px;
list-style: none;
display: none;
position: absolute;
top: 24px;
background-image: url(http://www.acrobatusers.com/sites/all/t … bottom.gif);
background-repeat: no-repeat;
background-position: 0 bottom;
}

#pun-navlinks.section ul.container ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

#pun-navlinks.section ul.container ul li {
width: 175px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}

/* Root Menu */
#pun-navlinks.section ul.container a {
-x-system-font:none;
background-attachment:scroll;
background-image:none;
background-position:0 0;
background-repeat:repeat;
color: #000000;
display:block;
float:none !important;
font-family:arial,Verdana,Helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
height:auto !important;
line-height:16px;
padding:0 0 0 17px;
text-decoration:none;
text-transform:uppercase;
}

/* Root Menu Hover Persistence */
#pun-navlinks.section ul.container a:hover, #pun-navlinks.section ul.container li:hover a, #pun-navlinks.section ul.container li.iehover a {
color: #ffcc33;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0 0;
}

/* 2nd Menu */
#pun-navlinks.section ul.container li:hover li a, #pun-navlinks.section ul.container li.iehover li a {
float: none;
bbackground: #bf2c2b;
color: #fff;
}

/* 2nd Menu Hover Persistence */
#pun-navlinks.section ul.container li:hover li a:hover, #pun-navlinks.section ul.container li:hover li:hover a, #pun-navlinks.section ul.container li.iehover li a:hover, #pun-navlinks.section ul.container li.iehover li.iehover a {
background: #555555;
color: #ffcc33;
}

/* Do Not Move - Must Come Before display:block for Gecko */
#pun-navlinks.section ul.container li:hover ul ul, #pun-navlinks.section ul.container li:hover ul ul ul, #pun-navlinks.section ul.container li.iehover ul ul, #pun-navlinks.section ul.container li.iehover ul ul ul {
display: none;
}

#pun-navlinks.section ul.container li:hover ul, #pun-navlinks.section ul.container ul li:hover ul, #pun-navlinks.section ul.container ul ul li:hover ul, #pun-navlinks.section ul.container li.iehover ul, #pun-navlinks.section ul.container ul li.iehover ul, #pun-navlinks.section ul.container ul ul li.iehover ul {
display: block;
}
#pun-break1, #pun-break2{display: none;}
#pun-announcement,#pun-announcement *{z-index: 1;}
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
</style>

стиль можно менять и настраивать

теперь скрипт, который заменяет стандартное меню, добавляет эффект плавности и делает выпадающие элементы невидимыми для гостей

html-низ:

Код:

<!--Меню-->
<script type="text/javascript">
     jQuery(function() {
             if (GroupID==3) { 
                jQuery('.markid').parent().hide();
                jQuery('.nog').parent().hide();
             } else {
             jQuery('.markid').map(function(){
               jQuery(this).attr('href', jQuery(this).attr('href')+UserID );
             });
    
             }
     });

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'https://forumupload.ru/uploads/000b/89/6b/16-1.gif', 23], right:['rightarrowclass', 'https://forumupload.ru/uploads/000b/89/6b/16-2.gif']}

var jqueryslidemenu={

animateduration: {over: 500, out: 200}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
	jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
	var $curobj=$(this)
	var $subul=$(this).find('ul:eq(0)')
	this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
	this.istopheader=$curobj.parents("ul").length==1? true : false
	$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
	$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
	)
	$curobj.hover(
function(e){
	var $targetul=$(this).children("ul:eq(0)")
	this._offsets={left:$(this).offset().left, top:$(this).offset().top}
	var menuleft=this.istopheader? 0 : this._dimensions.w
	menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
	$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
},
function(e){
	var $targetul=$(this).children("ul:eq(0)")
	$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
	) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
	}) //end document.ready
}
}

//build menu with ID="pun-navlinks" on page:
jqueryslidemenu.buildmenu("pun-navlinks", arrowimages)

var url = location.protocol+'//'+location.hostname;

document.getElementById('navprofile').innerHTML='<a href="'+url+'/profile.php?id='+UserID+'"><span>Профиль</span></a><ul><li><a class="markid" href="'+url+'/profile.php?section=personal&id=">Персональный</a></li><li><a class="markid" href="'+url+'/profile.php?section=messaging&id=">Общения</a></li><li><a class="markid" href="'+url+'/profile.php?section=avatar&id=">Аватар</a></li><li><a class="markid" href="'+url+'/profile.php?section=signature&id=">Подпись</a></li><li><a class="markid" href="'+url+'/profile.php?section=display&id=">Отображения</a></li><li><a class="markid" href="'+url+'/profile.php?section=privacy&id=">Приватность</a></li><li><a class="markid" href="'+url+'/profile.php?section=fields&id=">Остальное</a></li><li><a class="markid" href="'+url+'/profile.php?section=admin&id=">Управление</a></li></ul>'

document.getElementById('navpm').innerHTML='<a href="'+url+'/messages.php"><span>Сообщения</span></a><ul><li><a class="nog" href="'+url+'/messages.php?box=0">Входящие</a></li><li><a class="nog" href="'+url+'/messages.php?box=1">Отправленные</a></li><li><a class="nog" href="'+url+'//messages.php?action=new">Новое сообщение</a></li></ul>'
document.getElementById('navadmin').innerHTML='<a href="'+url+'/admin_index.php">Администрирование</a><ul><li><a class="nog" href="'+url+'/admin_categories.php" title="Добавление/удаление/редактирование категорий">Категории</a></li><li><a class="nog" href="'+url+'/admin_forums.php" title="Добавление/редактирование форумов">Форумы</a></li><li><a class="nog" href="'+url+'/admin_users.php" title="Поиск пользователя">Пользователи</a></li><li><a class="nog" href="'+url+'/admin_groups.php" title="Добавление/настройка групп">Группы</a></li><li><a class="nog" href="'+url+'/admin_options.php">Настройки</a></li><li><a class="nog" href="'+url+'/admin_permissions.php">Права</a></li><li><a class="nog" href="'+url+'/admin_censoring.php">Цензура</a></li><li><a class="nog" href="'+url+'/admin_ranks.php">Ранги</a></li><li><a class="nog" href="'+url+'/admin_bans.php">Блокировка</a></li><li><a class="nog" href="'+url+'/admin_logs.php" title="Система ведения логов форума">Логи</a></li><li><a class="nog" href="'+url+'/admin_prune.php">Чистка</a></li><li><a class="nog" href="'+url+'/admin_massmail.php" title="Массовая E-mail рассылка">Рассылка</a></li><li><a class="nog" href="'+url+'/admin_fields.php" title="Дополнительные поля профиля">Поля</a></li><li><a class="nog" href="'+url+'/admin_style.php" title="Свой стиль">Стиль</a></li><li><a class="nog" href="'+url+'/admin_pages.php" title="Добавление страницы">Страницы</a></li><li><a class="nog" href="'+url+'/admin_promotion.php" title="Метатеги/Поисковые системы">Раскрутка</a></li></ul>'
</script>

скрин (правда с другим стилем)

+1

Поделиться142010-03-10 09:46:02

Автор: zhele
Форумчанин
Откуда: Москва
Зарегистрирован: 2009-05-29
Приглашений: 0
Сообщений: 125
Уважение: +10
Позитив: +13
Пол: Мужской
Возраст: 51 [1973-11-29]
Провел на форуме:
9 дней 12 часов
Последний визит:
2010-07-24 12:11:34

Romych написал(а):

zhele написал(а):
При наезде ниспадающего окна на некоторые ссылки и элементы дизайна,оно прячется под них, с этим так и не разобрался.
это означает, что в выпадающих элементах меню z-index не достаточен
и его перекрывают другие элементы форума
попробуйте поставить z-index: 1000;
можно и поменьше

Вот только объясните мне бестолковому где менять z-index: 1000, в скрипте я не нашёл такого значения.

Герда написал(а):
вы хотите убрать с форума стандартное меню пользователя и вставить его в скрипт горизонтального меню?
кстати, такая возможность есть,
можно стандартное меню сделать выпадающим, а именно пункты имеющие много разделов Профиль Сообщения Администрирование

Это тоже интересно.Но я хотел вместо меню:Новые сообщения,Мои сообщения,Активные темы,Темы без ответов..... Вставить ниспадающее меню из поста №12.

0

Поделиться152010-03-10 11:47:03

Автор: Romych
Странник
Зарегистрирован: 2010-02-14
Приглашений: 0
Сообщений: 107
Уважение: +67
Позитив: +4
Пол: Мужской
Провел на форуме:
1 день 4 часа
Последний визит:
2013-03-19 22:15:49

zhele написал(а):

где менять z-index: 1000, в скрипте я не нашёл такого значения.

вы не нашли его потому что там его и нет, его нужно добавлять

z-index это свойство, которое устанавливает последовательность отображения слоёв, поскольку это значение не задано,
у вас и заезжают одни элементы под другие,
для этого и надо в выпадающем меню добавить свойство z-index, чтобы дать приоритет выпадающему элементу над другими элементами форума

+1

Поделиться162010-03-10 15:13:31

Автор: zhele
Форумчанин
Откуда: Москва
Зарегистрирован: 2009-05-29
Приглашений: 0
Сообщений: 125
Уважение: +10
Позитив: +13
Пол: Мужской
Возраст: 51 [1973-11-29]
Провел на форуме:
9 дней 12 часов
Последний визит:
2010-07-24 12:11:34

Romych написал(а):

z-index это свойство, которое устанавливает последовательность отображения слоёв, поскольку это значение не задано,
у вас и заезжают одни элементы под другие,
для этого и надо в выпадающем меню добавить свойство z-index, чтобы дать приоритет выпадающему элементу над другими элементами форума

Всё сделал! Отлично!Вы волшебник!Всё работает как надо!

0

Поделиться172010-04-17 17:46:32

Автор: Мэл
Форумчанин
Откуда: из тумбочки
Зарегистрирован: 2008-02-12
Приглашений: 0
Сообщений: 61
Уважение: +1
Позитив: +2
Пол: Женский
Провел на форуме:
1 день 6 часов
Последний визит:
2011-05-16 22:16:43

Помогите, люди добрые!
Я немного изменила скрипт Kanabis877. У меня вот что получилось
но мне интересно: можно ли сделать другой цвет этого меню? например, жёлтый
и можно ли сделать его... не таким длинным? кучнее)))
Вот код того, что я сотворила(который на картинке изображен)

Код:

<li><a href="#FFFFCC">Наши партнёры</a>
    <ul>
      <li><a href="#FFFFCC">Наши партнеры:<a href="http://svobod.f-rpg.ru/" target="_blank"><img src="https://forumupload.ru/uploads/0007/48/1e/5435-1.gif" border="0" width="81" height="31" alt="Svobod - Реклама "></a> <a target="_blank" href="http://artforum.mybb.ru/"><img src="http://i059.radikal.ru/1001/40/8161f116eddd.png" ></a> <a href="http://fludjlend.0pk.ru/"><img src="http://10pix.ru/img1/4377/827013.gif""></a> <a href="http://desian.artbb.ru/" target="_blank" title="Поддержка форумов"><img src="http://s61.radikal.ru/i174/1002/8d/33ea731bc04a.gif" border="0" /></a> <a href="http://cruelintentions.rusff.me/" title="Cruel Games in Big City.Part2" target="blank">
<img src="http://www.easyshare.ru/shared/a0344278049/3.png"></a> <a href="http://twilightnewgeneration.rolka.su/" target="_blank"><img src="http://ava-tar.ru/uploads/0000/26/b8/669941-1.gif" alt="» Twilight | New Generation"></a><a href="http://nicegirls.spybb.ru/" target=_blank><img src="http://s49.radikal.ru/i125/0912/24/223d192ea8ee.gif" title="Форум для девушек" border=0 width="88" height="31"></a><a href="http://stlove.1bb.ru/" target="_blank"><img src="https://forumupload.ru/uploads/000a/8d/51/7931-1.jpg" border="0" alt="Indigo College | Stereo Love -"></a> <a href="http://newmoonstory.rolka.su"><img src="http://i50.tinypic.com/27zkbhh.gif"></a><a href="http://twilighlovewithoutrul.rolebb.ru/" target="_blank"><img src="http://i40.tinypic.com/20r7ipt.png"title="Сумерки. Love without rules"border="0"width="88" height="31"></a>  
<a href="http://designtheforums.0pk.ru/" target="_blank"><img src="http://10pix.ru/img1/3936/958989.gif" border="0" width="81" height="31" alt="Раскрутка всех форумов"></a></a>
       
</span></td>

Отредактировано Мэл (2010-04-17 17:47:33)

0

Поделиться182010-04-22 21:51:28

Автор: zhele
Форумчанин
Откуда: Москва
Зарегистрирован: 2009-05-29
Приглашений: 0
Сообщений: 125
Уважение: +10
Позитив: +13
Пол: Мужской
Возраст: 51 [1973-11-29]
Провел на форуме:
9 дней 12 часов
Последний визит:
2010-07-24 12:11:34

Romych,Kanabis877
А есть возможность ту часть,которая располагается в объявлении,перенести например в ХТМЛ-низ или другой вариант любой.Вобщем беда такая:в объявлении находится скрипт боковой панели и ниспадающего меню, инфы много,сегодня добавляю в меню дополнительные строки-пропадает окончание бок.панели, и тогда весь форум рушится. Вставляю окончание скрипта панели,но оно не сохраняется пока не удалю несколько строк выше.

Отредактировано zhele (2010-04-22 21:53:29)

0

Поделиться192010-04-22 23:04:39

Автор: Toshiro-kun
Да, модератор я, угу
Зарегистрирован: 2010-03-08
Приглашений: 0
Сообщений: 3766
Уважение: +1013
Позитив: +9
Пол: Мужской
Возраст: 34 [1990-08-29]
Провел на форуме:
1 месяц 5 дней
Последний визит:
2012-08-11 15:49:22

Мэл написал(а):

можно ли сделать другой цвет этого меню?

Kanabis877 написал(а):

background: url(http://beholder-eye.info/example/dropdown/fone-tr.png);

Меняете картинку на свою или просто пишите цвет background:# Цвет

Далее что бы сделать их по кучнее нужно увеличить размеры окошка

Kanabis877 написал(а):

width: 138px;

Вот это попробуйте увеличить

0

Поделиться202010-04-23 00:11:45

Автор: Nazar4ik
Форумчанин
Зарегистрирован: 2009-02-20
Приглашений: 0
Сообщений: 39
Уважение: 0
Позитив: +4
Пол: Мужской
Провел на форуме:
1 день 1 час
Последний визит:
2011-03-26 02:44:52

Я бы хотел заказать настройку етово скрипта под свой форум... http://nonstopmusic.ru/

0

Поделиться212010-04-24 01:57:27

Автор: Romych
Странник
Зарегистрирован: 2010-02-14
Приглашений: 0
Сообщений: 107
Уважение: +67
Позитив: +4
Пол: Мужской
Провел на форуме:
1 день 4 часа
Последний визит:
2013-03-19 22:15:49

zhele написал(а):

Вставляю окончание скрипта панели,но оно не сохраняется пока не удалю несколько строк выше.

покажите какой именноскрпит вы ставите, их в этой теме как минимум 3,
тот вариант, который я разместил здесь можно размещать в html-низу, в Объявлении не обязательно

0

Поделиться222010-04-24 08:14:20

Автор: zhele
Форумчанин
Откуда: Москва
Зарегистрирован: 2009-05-29
Приглашений: 0
Сообщений: 125
Уважение: +10
Позитив: +13
Пол: Мужской
Возраст: 51 [1973-11-29]
Провел на форуме:
9 дней 12 часов
Последний визит:
2010-07-24 12:11:34

У меня стоит скрипт из поста № 2

0

Поделиться232010-04-25 21:45:25

Автор: Туки Туки
Форумчанин
Зарегистрирован: 2009-09-24
Приглашений: 0
Сообщений: 109
Уважение: +3
Позитив: +14
Пол: Женский
Провел на форуме:
2 дня 3 часа
Последний визит:
2012-01-10 22:27:59

кстати, ведь скрипт, который указан в посте №2, это лишь начало, там предстоит еще долгая настройка, так вот хотелось бы спросить, я почитала про ту утомительную работу, которую нужно будет выполнить по настройке скрипты и задалась всего одним тупым вопросом.

Выпадающее меню на CSS написал(а):

Теперь мы добавим несколько кусочков CSS в наш код:

куда добавим?) т.е. в какую именно его часть)

Отредактировано Туки Туки (2010-04-25 21:45:46)

0

Поделиться242010-04-26 00:00:41

Автор: Romych
Странник
Зарегистрирован: 2010-02-14
Приглашений: 0
Сообщений: 107
Уважение: +67
Позитив: +4
Пол: Мужской
Провел на форуме:
1 день 4 часа
Последний визит:
2013-03-19 22:15:49

zhele написал(а):

А есть возможность ту часть,которая располагается в объявлении,перенести например в ХТМЛ-низ

я думаю вам лучше всего создать тестовый форум и на нём поэкспериментировать, если боитесь поломать основной
и там попробовать перенести нужные пункты из Объявления в html-низ

0

Поделиться252010-04-26 00:35:01

Автор: zhele
Форумчанин
Откуда: Москва
Зарегистрирован: 2009-05-29
Приглашений: 0
Сообщений: 125
Уважение: +10
Позитив: +13
Пол: Мужской
Возраст: 51 [1973-11-29]
Провел на форуме:
9 дней 12 часов
Последний визит:
2010-07-24 12:11:34

Romych
Спасибо за совет.Пробую потихоньку.К сожалению не слишком силён во всём этом. В общем то тупо вставил всё из объявления в ХТМЛ-низ, меню работает,появляется тока с тормозами,но перестали работать другие скрипты.Я так думаю,что в моём случае нужно вмешательство спеца. Честно говоря щас и время не хватает на эксперименты. Напихано много и в низ и в верх,по любому чё нибудь и сконфликтует, да еслиб ещё я пограмотней был бы в ХТМЛ-языке.Поэтому ищу помощи у специалиста,серьёзного,как говорится с серьёзными намерениями ,потому как сделать надо всё быстро и самое главное грамотно. Моя аська в профиле.Заранее благодарен.

0

Поделиться262010-04-26 00:46:24

Автор: zhele
Форумчанин
Откуда: Москва
Зарегистрирован: 2009-05-29
Приглашений: 0
Сообщений: 125
Уважение: +10
Позитив: +13
Пол: Мужской
Возраст: 51 [1973-11-29]
Провел на форуме:
9 дней 12 часов
Последний визит:
2010-07-24 12:11:34

Да, с меню мне надо что то глобально реформировать, его длина не влазит никуда. Всавил в низ,пропало половина содержимого ХТМЛ-Низ.Вот так вот.Знать бы раньше,подстелил бы соломки.

0

Поделиться272010-04-26 01:03:09

Автор: Toshiro-kun
Да, модератор я, угу
Зарегистрирован: 2010-03-08
Приглашений: 0
Сообщений: 3766
Уважение: +1013
Позитив: +9
Пол: Мужской
Возраст: 34 [1990-08-29]
Провел на форуме:
1 месяц 5 дней
Последний визит:
2012-08-11 15:49:22

zhele
А зачем все в низ. Там же расписано что и куда. Собственно вниз то и ни чего не идет. Вверх да в объявление. А размеры сами подкручивайте.

0

Поделиться282010-04-26 01:09:56

Автор: zhele
Форумчанин
Откуда: Москва
Зарегистрирован: 2009-05-29
Приглашений: 0
Сообщений: 125
Уважение: +10
Позитив: +13
Пол: Мужской
Возраст: 51 [1973-11-29]
Провел на форуме:
9 дней 12 часов
Последний визит:
2010-07-24 12:11:34

Toshiro-kun
Оно работает как и указано в посте №2, так же работает при переносе из объявления в хтмл-низ.Зачем я всё это мучаю? Моё меню стало громадным по размеру. Заранее я даже подумать не мог, что место во всех блоках верха,низа и объявления не безгранично. По-этому при добавлении одной строчки в меню,теперь ровно на одну строчку пропадает ниже, и всё рушится.Я думаю вроде объяснил мою проблему. А проблема в не знании всех тонкостей системы.

0

Поделиться292010-05-01 21:29:02

Автор: Туки Туки
Форумчанин
Зарегистрирован: 2009-09-24
Приглашений: 0
Сообщений: 109
Уважение: +3
Позитив: +14
Пол: Женский
Провел на форуме:
2 дня 3 часа
Последний визит:
2012-01-10 22:27:59

Сделала скрипт из второго поста, но вот одна проблемка, у меня 4 основных поля, но вот четвертое отказывается воспроизводить все нормально, получается так

Вот код самого объявления... уже как только не пробовала, что я неправильно делаю?

Код:

<ul id="nav">
  <li><a href="http://unclouds.mybb.ru/"><img src="http://i058.radikal.ru/1005/02/903f89078fc3.png" ></a></li>
  <li><a href="#null"><img src="http://s52.radikal.ru/i137/1005/0e/ebe80c2071ac.png" ></a>
    <ul>
      <li><a href="http://unclouds.mybb.ru/profile.php?id=5">Ann Grey</a></li>
       <li><a href="http://unclouds.mybb.ru/profile.php?id=4">Gabriella Rosse</a></li>
        <li><a href="http://unclouds.mybb.ru/profile.php?id=3">Brad</a></li>
    </ul>
  </li>
   <li><a href="#null"><img src="http://s002.radikal.ru/i199/1005/ac/b7412249e9e7.png" ></a>
     <ul>
      <li><a href="#null">Who/</a></li>
        <li><a href="#null">Who/</a></li>
       <li><a href="#null">Who/</a></li>
    </ul>
       <li><a href="#nul"><img src="http://i078.radikal.ru/1005/b7/8d3a44a1e8f4.png" ></a></li>
<ul>
<li><a href="http://unclouds.mybb.ru/viewtopic.php?id=2">-Гостевая-</a></li>
<li><a href="http://unclouds.mybb.ru/viewtopic.php?id=21">-Сюжет</a></li>
<li><a href="http://unclouds.mybb.ru/viewtopic.php?id=34">-Акция#1-</a></li>
<li><a href="http://unclouds.mybb.ru/viewtopic.php?id=19">-Занятые внешности-</a></li>
<li><a href="http://unclouds.mybb.ru/viewtopic.php?id=18">-Отношения-</a></li>
<li><a href="http://unclouds.mybb.ru/viewtopic.php?id=17">-Аватаризация-</a></li>
<li><a href="http://unclouds.mybb.ru/viewforum.php?id=6">-Реклама-</a></li>
<li><a href="http://unclouds.mybb.ru/viewtopic.php?id=36">-Правила-</a></li>
<li><a href="http://unclouds.mybb.ru/viewtopic.php?id=30">-F.A.Q.-</a></li>
<li><a href="http://unclouds.mybb.ru/viewtopic.php?id=13">-Квесты-</a></li>
</ul>
</ul>

Ссылка на данный сайт в профиле

Отредактировано Туки Туки (2010-05-01 21:30:02)

0

Поделиться302010-05-01 22:12:33

Автор: Toshiro-kun
Да, модератор я, угу
Зарегистрирован: 2010-03-08
Приглашений: 0
Сообщений: 3766
Уважение: +1013
Позитив: +9
Пол: Мужской
Возраст: 34 [1990-08-29]
Провел на форуме:
1 месяц 5 дней
Последний визит:
2012-08-11 15:49:22

Туки Туки

в html-верх находите основу к этому коду а именно вот эту часть в нем

#nav a {
color: #fff;
text-decoration: none;
display: block;
width: 120px;
padding: 4px 10px;
background: url(http://beholder-eye.info/example/dropdown/dot.png) repeat-y right;
}

То что красным увеличиваете до 160 все должно быть в норме

+1

Форум поддержки пользователей ZeroParking

Меню навигации

Пользовательские ссылки

Информация о пользователе

Скрипт горизонтального ниспадающего навигационного меню (css+html)

Сообщений 1 страница 30 из 73

Поделиться12010-01-23 23:53:26

Поделиться22010-01-24 01:12:06

Поделиться32010-01-24 14:09:13

Поделиться42010-01-28 03:56:00

Поделиться52010-02-28 13:12:05

Поделиться62010-02-28 13:17:10

Поделиться72010-02-28 13:45:16

Поделиться82010-02-28 13:51:59

Поделиться92010-02-28 13:58:09

Поделиться102010-02-28 14:08:32

Поделиться112010-03-09 16:47:57

Поделиться122010-03-09 23:04:08

Поделиться132010-03-09 23:47:00

Поделиться142010-03-10 09:46:02

Поделиться152010-03-10 11:47:03

Поделиться162010-03-10 15:13:31

Поделиться172010-04-17 17:46:32

Поделиться182010-04-22 21:51:28

Поделиться192010-04-22 23:04:39

Поделиться202010-04-23 00:11:45

Поделиться212010-04-24 01:57:27

Поделиться222010-04-24 08:14:20

Поделиться232010-04-25 21:45:25

Поделиться242010-04-26 00:00:41

Поделиться252010-04-26 00:35:01

Поделиться262010-04-26 00:46:24

Поделиться272010-04-26 01:03:09

Поделиться282010-04-26 01:09:56

Поделиться292010-05-01 21:29:02

Поделиться302010-05-01 22:12:33