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

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Форум поддержки пользователей ZeroParking » Галерея скриптов » Скрипт горизонтального ниспадающего навигационного меню (css+html)


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

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

1

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

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

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

http://i009.radikal.ru/0910/0b/6e75ae5e7930.jpg
______________________

Преимущества этого меню:
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

2

не знаю как остальные но я бы воспользовался вот этим меню) оно мне как- то больше по душе))
итак 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

3

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

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

0

4

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

0

5

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

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

С этим скриптом я ничего не поняла. Куда засовывать текст, который будет вываливаться при наведении курсора на ссылку? И код для объявления... в какую часть самого объявления его засовывать?  https://forumupload.ru/uploads/0002/25/06/8547-5.gif

0

6

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

0

7

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

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

0

8

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

0

9

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

0

10

Кстати маленький ньюанс по скрипту из  поста №2. При наезде ниспадающего окна на некоторые ссылки и элементы дизайна,оно прячется под них, с этим так и не разобрался. https://forumupload.ru/uploads/0002/25/06/8547-5.gif Пришлось нагромоздить пока кучу картинок под меню.Может, кто-нибудь подскажет. https://forumupload.ru/uploads/0002/25/06/8547-2.gif

0

11

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

0

12

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

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

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

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

0

13

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

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

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

для этого требуется фреймворк 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>

скрин (правда с другим стилем)
http://s47.radikal.ru/i118/1001/99/0765c49fe016.jpg

+1

14

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

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

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

Вот только объясните мне бестолковому  https://forumupload.ru/uploads/0002/25/06/8547-5.gif  где менять z-index: 1000, в скрипте я не нашёл такого значения.

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

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

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

0

15

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

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

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

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

+1

16

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

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

Всё сделал! Отлично!Вы волшебник!Всё работает как надо! https://forumupload.ru/uploads/0002/25/06/8550-2.gif  https://forumupload.ru/uploads/0002/25/06/8550-2.gif  https://forumupload.ru/uploads/0002/25/06/8550-2.gif

0

17

Помогите, люди добрые!
Я немного изменила скрипт Kanabis877. У меня вот что получилось  http://s45.radikal.ru/i107/1004/63/084cc1407cf5.jpg
но мне интересно: можно ли сделать другой цвет этого меню? например, жёлтый
и можно ли сделать его... не таким длинным? кучнее)))
Вот код того, что я сотворила(который на картинке изображен)

Код:
<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

18

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

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

0

19

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

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

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

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

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

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

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

width: 138px;

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

0

20

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

0

21

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

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

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

0

22

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

0

23

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

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

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

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

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

0

24

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

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

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

0

25

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

0

26

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

0

27

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

0

28

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

0

29

Сделала скрипт из второго поста, но вот одна проблемка, у меня 4 основных поля, но вот четвертое отказывается воспроизводить все нормально, получается так
http://s42.radikal.ru/i098/1005/be/66b94a6d055e.png
Вот код самого объявления... уже как только не пробовала, что я неправильно делаю?

Код:
<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

30

Туки Туки

в 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)


Рейтинг форумов | Создать форум бесплатно