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

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

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


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


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

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

61

нарот потскажыти пожалуста по скайпу ато я нечё непоинмаю плиз вот мой скайп misha_9632

0

62

Горная Снежинк@ написал(а):

Вы можете объяснить мне подробней как сделать такое миню, какое показано на картинке в 13 посте??

я его ещё немного усовершенстоввал
какие отличия между старой (13 пост) и новой версией?

1. не надо ничего вручную прописывать в скрипте (ни адрес вашего форума, ни что-либо ещё)
2. кроме предыдущих выпадающих пунктов (Профиль, Сообщение, Администрирование) выпадающим стал ещё и список Участники (но корректно отображаются только ники написанные латинским шрифтом из-за того что наш любимый сервис, к сожалению, пока не поддерживает кодировку UTF-8)
3. скрипт существенно сократился и стал более грамотным (гости не видят те пункты меню, которые им не положено, пользователи соответственно тоже)

Выпадающее главное меню. v4

в html-верх:

Код:
<style type="text/css">
#pun-navlinks.section{display: block;position: relative;z-index: 1000;opacity: 0.9;filter: alpha(opacity=90);}
#pun-navlinks.section ul.container li {height: 24px;display: inline;position: relative;float: left;}

#pun-navlinks.section ul.container ul {width: 175px;list-style: none;display: none;position: absolute;top: 16px;left: -5px;background:#828282;}
#pun-navlinks.section ul.container ul  {-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px;  border-radius: 10px;}

#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;display: block !important;display: inline; text-align:center;font-weight:bold;}

/* 2nd Menu */
#pun-navlinks.section ul.container li:hover li a, #pun-navlinks.section ul.container li.iehover li a {float: none;color: #ffffff;}
/* 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;text-decoration:none;font-weight:bold;}
/* 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;}
</style>

в html-низ:

Код:
<!--Меню-->
<script type="text/javascript">
$(function() {if (GroupID==3) { 
$('.nog').parent().hide();} 
else {$('.markid').map(function(){
$(this).attr('href', $(this).attr('href')+UserID ); });
} });
var url = location.protocol+'//'+location.hostname;
if(typeof (UserID)!="undefined") {
$('#navprofile').append('<ul><li><a href="'+url+'/profile.php?section=personal&id='+UserID+'">Персональный</a></li><li><a href="'+url+'/profile.php?section=messaging&id='+UserID+'">Общения</a></li><li><a href="'+url+'/profile.php?section=avatar&id='+UserID+'">Аватар</a></li><li><a href="'+url+'/profile.php?section=signature&id='+UserID+'">Подпись</a></li><li><a href="'+url+'/profile.php?section=display&id='+UserID+'">Отображения</a></li><li><a href="'+url+'/profile.php?section=privacy&id='+UserID+'">Приватность</a></li><li><a href="'+url+'/profile.php?section=fields&id='+UserID+'">Остальное</a></li><li><a href="'+url+'/profile.php?section=admin&id='+UserID+'">Управление</a></li></ul>'); 
}
$('#navpm').append('<ul><li><a href="'+url+'/messages.php?box=0">Входящие</a></li><li><a href="'+url+'/messages.php?box=1">Отправленные</a></li><li><a href="'+url+'//messages.php?action=new">Новое сообщение</a></li></ul>'); 
$('#navadmin').append('<ul><li><a href="'+url+'/admin_categories.php" title="Добавление/удаление/редактирование категорий">Категории</a></li><li><a href="'+url+'/admin_forums.php" title="Добавление/редактирование форумов">Форумы</a></li><li><a href="'+url+'/admin_users.php" title="Поиск пользователя">Пользователи</a></li><li><a href="'+url+'/admin_groups.php" title="Добавление/настройка групп">Группы</a></li><li><a href="'+url+'/admin_options.php">Настройки</a></li><li><a href="'+url+'/admin_permissions.php">Права</a></li><li><a href="'+url+'/admin_censoring.php">Цензура</a></li><li><a href="'+url+'/admin_ranks.php">Ранги</a></li><li><a href="'+url+'/admin_bans.php">Блокировка</a></li><li><a href="'+url+'/admin_logs.php" title="Система ведения логов форума">Логи</a></li><li><a href="'+url+'/admin_prune.php">Чистка</a></li><li><a href="'+url+'/admin_massmail.php" title="Массовая E-mail рассылка">Рассылка</a></li><li><a href="'+url+'/admin_fields.php" title="Дополнительные поля профиля">Поля</a></li><li><a href="'+url+'/admin_style.php" title="Свой стиль">Стиль</a></li><li><a href="'+url+'/admin_pages.php" title="Добавление страницы">Страницы</a></li><li><a href="'+url+'/admin_promotion.php" title="Метатеги/Поисковые системы">Раскрутка</a></li><li><a href="'+url+'/admin_paid_services.php" title="Платные услуги">Платные услуги</a></li></ul>');
$('#navuserlist').append('<ul id="userpol" class="nog"></ul>'); 
$.get('userlist.php','',processContacts);
function processContacts(data){
$(data).find('td.tcl').each(function(){  
var JUser=$(this).find('span.usersname').text();var ULink=$(this).find('span.usersname a').attr('href');
$('#userpol').append('<li><a href="'+ULink+'">'+JUser+'</a></li>'); });}
</script>

0

63

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

Горная Снежинк@ написал(а):

    Вы можете объяснить мне подробней как сделать такое миню, какое показано на картинке в 13 посте??

я его ещё немного усовершенстоввал
какие отличия между старой (13 пост) и новой версией?

1. не надо ничего вручную прописывать в скрипте (ни адрес вашего форума, ни что-либо ещё)
2. кроме предыдущих выпадающих пунктов (Профиль, Сообщение, Администрирование) выпадающим стал ещё и список Участники (но корректно отображаются только ники написанные латинским шрифтом из-за того что наш любимый сервис, к сожалению, пока не поддерживает кодировку UTF-8)
3. скрипт существенно сократился и стал более грамотным (гости не видят те пункты меню, которые им не положено, пользователи соответственно тоже)

Выпадающее главное меню. v4

в html-верх:
Выделить код

<style type="text/css">
#pun-navlinks.section{display: block;position: relative;z-index: 1000;opacity: 0.9;filter: alpha(opacity=90);}
#pun-navlinks.section ul.container li {height: 24px;display: inline;position: relative;float: left;}

#pun-navlinks.section ul.container ul {width: 175px;list-style: none;display: none;position: absolute;top: 16px;left: -5px;background:#828282;}
#pun-navlinks.section ul.container ul  {-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px;  border-radius: 10px;}

#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;display: block !important;display: inline; text-align:center;font-weight:bold;}

/* 2nd Menu */
#pun-navlinks.section ul.container li:hover li a, #pun-navlinks.section ul.container li.iehover li a {float: none;color: #ffffff;}
/* 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;text-decoration:none;font-weight:bold;}
/* 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;}
</style>

в html-низ:
Выделить код

<!--Меню-->
<script type="text/javascript">
$(function() {if (GroupID==3) {
$('.nog').parent().hide();}
else {$('.markid').map(function(){
$(this).attr('href', $(this).attr('href')+UserID ); });
} });
var url = location.protocol+'//'+location.hostname;
if(typeof (UserID)!="undefined") {
$('#navprofile').append('<ul><li><a href="'+url+'/profile.php?section=personal&id='+UserID+'">Персональный</a></li><li><a href="'+url+'/profile.php?section=messaging&id='+UserID+'">Общения</a></li><li><a href="'+url+'/profile.php?section=avatar&id='+UserID+'">Аватар</a></li><li><a href="'+url+'/profile.php?section=signature&id='+UserID+'">Подпись</a></li><li><a href="'+url+'/profile.php?section=display&id='+UserID+'">Отображения</a></li><li><a href="'+url+'/profile.php?section=privacy&id='+UserID+'">Приватность</a></li><li><a href="'+url+'/profile.php?section=fields&id='+UserID+'">Остальное</a></li><li><a href="'+url+'/profile.php?section=admin&id='+UserID+'">Управление</a></li></ul>');
}
$('#navpm').append('<ul><li><a href="'+url+'/messages.php?box=0">Входящие</a></li><li><a href="'+url+'/messages.php?box=1">Отправленные</a></li><li><a href="'+url+'//messages.php?action=new">Новое сообщение</a></li></ul>');
$('#navadmin').append('<ul><li><a href="'+url+'/admin_categories.php" title="Добавление/удаление/редактирование категорий">Категории</a></li><li><a href="'+url+'/admin_forums.php" title="Добавление/редактирование форумов">Форумы</a></li><li><a href="'+url+'/admin_users.php" title="Поиск пользователя">Пользователи</a></li><li><a href="'+url+'/admin_groups.php" title="Добавление/настройка групп">Группы</a></li><li><a href="'+url+'/admin_options.php">Настройки</a></li><li><a href="'+url+'/admin_permissions.php">Права</a></li><li><a href="'+url+'/admin_censoring.php">Цензура</a></li><li><a href="'+url+'/admin_ranks.php">Ранги</a></li><li><a href="'+url+'/admin_bans.php">Блокировка</a></li><li><a href="'+url+'/admin_logs.php" title="Система ведения логов форума">Логи</a></li><li><a href="'+url+'/admin_prune.php">Чистка</a></li><li><a href="'+url+'/admin_massmail.php" title="Массовая E-mail рассылка">Рассылка</a></li><li><a href="'+url+'/admin_fields.php" title="Дополнительные поля профиля">Поля</a></li><li><a href="'+url+'/admin_style.php" title="Свой стиль">Стиль</a></li><li><a href="'+url+'/admin_pages.php" title="Добавление страницы">Страницы</a></li><li><a href="'+url+'/admin_promotion.php" title="Метатеги/Поисковые системы">Раскрутка</a></li><li><a href="'+url+'/admin_paid_services.php" title="Платные услуги">Платные услуги</a></li></ul>');
$('#navuserlist').append('<ul id="userpol" class="nog"></ul>');
$.get('userlist.php','',processContacts);
function processContacts(data){
$(data).find('td.tcl').each(function(){ 
var JUser=$(this).find('span.usersname').text();var ULink=$(this).find('span.usersname a').attr('href');
$('#userpol').append('<li><a href="'+ULink+'">'+JUser+'</a></li>'); });}
</script>

Отлично!!! Только вот почему-то сместилась строка сообщений, не по центру.

0

64

Есть небольшая проблемка с этим скриптом.
Вот так это выглядит сейчас:
http://s58.radikal.ru/i162/1202/d2/d49f47488121t.jpg
Я долго билась головой об клаву, но ничего не выходит. Нужно подвинуть первое слово, чтобы наравне со всеми стояло, и... Как-то подвинуть выплывающие окна вправо, чтобы были под словами.
Заранее спасибо за помощь.

0

65

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

Я долго билась головой об клаву, но ничего не выходит. Нужно подвинуть первое слово, чтобы наравне со всеми стояло, и... Как-то подвинуть выплывающие окна вправо, чтобы были под словами.

А ссылка на форум где? Где это усе стоит.  :)

0

66

Leonheart
http://pokemonrpg.hutt.ru/ - на подопытном кролике на данный момент =Р

0

67

Mefrana,

обновите в html-верху код стиля объявления:

Код:
<style type="text/css">
#nav {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  border: 0px solid ;
  background: ;
  float: none;
  width: 100%;
}
#nav ul {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #36431a;
  background: #8ea759 ;
  float: none;
  width: 100%;
}
#nav li {
  float: left;
  position: relative;
  background: ;
  back\ground: none;
}
#nav li ul {
  display: none;
  position: absolute;
  background: ;
  padding: 8px 10px;
  width: 123px;
}
#nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 180px;
  padding: 5px 0px;
  background: repeat-y right;
}

#nav li li a {
  width: 200px;
  background: none;
}

#nav li:hover ul {
  display: block;
  margin-left: 50px;
}

#nav li:hover li ul {
  display: none;
  width: 140px;
  top: 0px;
  left: 133px;
}

#nav li:hover li:hover ul {
  display: block;
}
</style>

И само объявление тоже:

Код:
	<ul id="nav">
  <li><a href="#null"><img style="margin-top: -2px; margin-left: 40px;" src="http://uploads.ru/i/Z/B/W/ZBWAv.png"></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>
  <li><a href="#null"><img src="http://s40.radikal.ru/i088/1202/4a/bf4102e3b6d1.png"></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>
  <li><a href="#null"><img src="http://s017.radikal.ru/i426/1202/b6/54d191ee6867.png"></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>
  <li><a href="#null"><img src="http://s017.radikal.ru/i442/1202/b0/1924927bcf39.png"></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>

+1

68

Leonheart
Спасибо =)

0

69

А я снова с вопросом =)
Теперь не прошу скриптов, просто ткните меня носом, где циферка отвечающая за... выплывающие окошко. А то на ссылку навожу, всё ок. Смещаю мышь вниз и контейнер закрывается...

З.Ы. Больше ничего не нада, только эту циферку поменять и я буду прыгать от счастья =)

0

70

А вообще, хотелось бы, чтобы окошки работали как здесь. Без всяких сбоев.

0

71

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

ссылку навожу, всё ок. Смещаю мышь вниз и контейнер закрывается...

Этот пункт

#nav li {
  float: left;
  position: relative;
  background: ;
  back\ground: none;
}

замените на Такой

#nav li {
  float: left;
  position: relative;
  background: ;
  z-index:1000;
  back\ground: none;
  padding-bottom:10px
  margin-bottom:-10px;
}

+2

72

Deff
Ооо! *прыгает от счастья, что хоть что-то получилось* Спасибо!

0

73

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

0


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


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