Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Архив » Создаем выплывающее меню


Создаем выплывающее меню

Сообщений 101 страница 120 из 144

101

Invisible Man Отключи пока Объявление

0

102

Invisible Man
я уже давно сделал новую версию этого меню, минут через 20 выложу

0

103

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

я уже давно сделал новую версию этого меню, минут через 20 выложу

Ех..опять на свой лад переделывать  :whistle:  Корошо жду  :flag:

0

104

Invisible Man написал(а):

Но вот бегунок (скрин*) в браузере не убирается не каким способом..

<style type="text/css">
#pun-navlinks h2 {display:none;}
#pun-navlinks.section{
display: block;
position: relative;
                z-index: 500;
left: 8em;

Это убери

+1

105

собственно хотелось добиться универсальности,
чтоб при установке этого меню вид вашего обычного не менялся и не смещался, ни влево, ни в право и избежать необходимости в скрипте прописывать вручную адрес форума, как это было в предыдущих версиях,
скрипт меню существенно сократился и сделан уже с правильным подходом, т.е. я уже в нём ничего не скрываю от гостей или пользователей,
а пристраиваю своё меню к стандартному,
поэтому гости и так не видят тех пунктов, которые им не положено и пользователи не видят пункт Администрирование со всеми вытекающими (от гостей я скрыл только пункт Участники),
а админ видит всё что и должен видеть,
вся задача этого меню заключается в ускорении доступа к тем пунктам, которые нужны: Админу, модеру, пользователю
и исключить лишние переходы по страницам,
в меню так же добавлен выпадающий список участников (сделан на ajax запросе)
собственно грамотно было бы сделать всё меню на ajax запросах, скрипт бы получился в разы меньше, и не пришлось бы в ручную дописывать дополнительные пункты в адиминке, которые появляются на сервисе с периодичностью раз в полгода, НО...поскольку сервис до сих пор не перешёл ещё на кодировку UTF-8, то вместо пунктов меню кириллицей, мы сейчас при ajax запросах видим билеберду  и кракозяблы,
так что в выпадающем списке Участников все ники кириллицей выглядят именно так, но тем не менее, я включил его в меню,
короче хватит бла бла бла
вот собственно сам продукт

Выпадающее главное меню. 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>

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

0

106

Здравствуйте, подскажите, пожалуйста, как можно сделать так, чтобы первый контейнер всегда был по умолчанию открыт?

вот как тут
http://hproleplay.mybb.ru/
заходишь на страницу, и колонка Новости всегда автоматически открыта.
заранее спасибо

и еще интересно как сделать, чтобы контейнеры не раскрывались, а плавно переключались, всё так же как на вышеуказанном форуме.

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

0

107

Shoichi  :glasses: Закажите в заказах таблиц или полистайте готовое(последние 10-13страниц - там есть коды

0

108

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

Shoichi   Закажите в заказах таблиц или полистайте готовое(последние 10-13страниц - там есть коды

Это не стандартное выплывающее меню, даже я вижу сразу, вряд ли там будет точно такое же, поэтому я и написал сюда в надежде, что кто-то может мне помочь.
Мне не нужна таблица с этим кодом, таблицу я и сам в состоянии сделать. всё что мне нужно - код на переключающееся меню с по умолчанию открытым первым контейнером

0

109

Shoichi  :glasses:

0

110

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

вобщем вот испраленный вариант (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: none;}

#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>

<!--Портал->
<script type="text/javascript">
var page = "pages/php";
var timer = 1;
var a = window.location.pathname;
var domain = window.location.hostname + '/';
var time = new Date();
if(navigator.cookieEnabled){
if ((a=='/' || a=='/index.php' || a=='') && document.cookie.indexOf("indexpage=true")==-1){
    location.href = 'http://' + domain + page;
}
time.setHours(time.getHours()+timer);
document.cookie = "indexpage=true; expires=" + time.toGMTString() +  "; path=/";
}
</script>

(исправил дизайнер)

Romych,

добавь еще в навигацию поиск (здесь есть скрипт быстрого поиска)
хотелось бы его видеть в новом варианте!

Отредактировано baron4ik (Вт, 25 Окт 2011 19:34:19)

0

111

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

вобщем вот испраленный вариант (html верх)

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

0

112

Wiv
Ссылку на форум с установленным кодом - юзер ник пароль (выложите под 300 сообщений)- коли нет пиар логина

0

113

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

Ссылку на форум с установленным кодом

вот ссылка

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

юзер ник пароль (выложите под 300 сообщений)- коли нет пиар логина

есть вход для рекламы...
вам какой ник и пароль нужен? администрации?

0

114

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

есть вход для рекламы...

Попробуйте добавить к скрипту строку красным

<!--Выпадающее главное меню-->
<style>#pun-navlinks ul li{padding-bottom:10px}</style>
<script type="text/javascript">
$(function() {if (GroupID==3) {
$('.nog').parent().hide();}
...

0

115

Deff
большое спасибо )
а можно еще поинтересоваться где именно в скрипте можно поменять цвет подложки (а лучше вставить графический фон картинкой) и шрифта в выпадающем меню?

Отредактировано Wiv (Чт, 24 Ноя 2011 22:24:51)

0

116

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

а можно еще поинтересоваться где именно в скрипте можно поменять цвет подложки и шрифта в выпадающем меню?

Пробуйте через css

<style>
#pun-navlinks.section ul.container li:hover ul{
background-color:#CFEAB1!important;
color:#ffffff!important;
}
</style>

0

117

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

а лучше вставить графический фон картинкой)

<style>
#pun-navlinks.section ul.container li:hover ul{
background-color:transparent!important;
background-image:url(Ccылка на картинку)!important;
color:#ffffff!important;
}
</style>

0

118

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

Пробуйте через css

спасибо за помощь )

Отредактировано Wiv (Чт, 24 Ноя 2011 22:33:29)

0

119

Выпадающее главное меню. v5
(на ajax запросах)

после того как починили кодировку и криллица стала отображаться, захотелось побаловаться с меню, пункты которого формируются через ajax запросы,
чем такое меню интереснее предыдщих вариантов,тем что не надо вручную добавлять новые пункты, которые периодически появляются с добавлением нового функционала на форуме (Файлы, Резервные копии и т.д.)
выпадающими кроме Админменю, являются пункты Профиль, Сообщения и список Участников

http://uploads.ru/t/n/X/9/nX9cC.png

в html-верх:

Код:
/*выпадающее меню*/
<style type="text/css">
#pun-navlinks{display: block;position: relative;z-index: 9999;opacity: 0.9;filter: alpha(opacity=90);}
#pun-navlinks ul li {margin: 0px 20px 0px 0px;float: left;display: inline;list-style: none;position: relative;height: 24px;}
#pun-navlinks ul ul {padding: 0px 0px 12px 0px;width: 175px;list-style: none;display: none;position: absolute;top: 24px;left: -5px;border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));	background-image: -webkit-linear-gradient(#444, #111);	background-image: -o-linear-gradient(#444, #111);background-image: -ms-linear-gradient(#444, #111);background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;}
#pun-navlinks ul ul li {width: 164px;float: left;display: block !important;text-align:center;}
/* 2nd Menu */
#pun-navlinks ul li:hover li a, #pun-navlinks ul li.iehover li a {float: none;color: #fff;}
#pun-navlinks ul ul ul li:first-child a:after {content: '';position: absolute;left: -6px;top: 50%;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #444;}
/* 2nd Menu Hover Persistence */
#pun-navlinks ul li:hover li a:hover, #pun-navlinks ul li:hover li:hover a, #pun-navlinks ul li.iehover li a:hover, #pun-navlinks ul li.iehover li.iehover a {color: #ffcc33;text-decoration:none;font-weight:bold;text-transform: uppercase;text-shadow: 0 1px 0 #000;}
#pun-navlinks ul ul li:hover {background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec,  #0186ba);background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));background-image: -webkit-linear-gradient(#04acec, #0186ba);background-image: -o-linear-gradient(#04acec, #0186ba);background-image: -ms-linear-gradient(#04acec, #0186ba);background-image: linear-gradient(#04acec, #0186ba);
-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;}
/* Do Not Move - Must Come Before display:block for Gecko */
#pun-navlinks ul li:hover ul ul, #pun-navlinks ul li:hover ul ul ul, #pun-navlinks ul li.iehover ul ul, #pun-navlinks ul li.iehover ul ul ul {display: none;position: absolute;top: 0;left: 160px;}
#pun-navlinks ul li:hover ul, #pun-navlinks ul ul li:hover ul, #pun-navlinks ul ul ul li:hover ul, #pun-navlinks ul li.iehover ul, #pun-navlinks ul ul li.iehover ul, #pun-navlinks ul ul ul li.iehover ul {display: block;}
</style>

в html-низ:

Код:
<!--Меню-->
<script type="text/javascript">
$('#navuserlist').append('<ul id="userpol"></ul>');$('#navprofile').append('<ul id="UserUL"></ul>'); $('#navpm').append('<ul id="UsMess"></ul>'); $('#navadmin').append('<ul id="adminUL"></ul>'); 
$.get('admin_index.php','',AdminMenu);
function AdminMenu(data){
$(data).find('#adnav-standard ul:not(.adsubnav)').each(function(){ 
var sub1=$(this).find('li.item6 a').attr('href');
$(this).find('li.item6 ul a').each(function(){ aa=$(this).attr('href');bb=(sub1+aa);$(this).attr('href', bb);});
var sub2=$(this).find('li.item7 a').attr('href');
$(this).find('li.item7 ul a').each(function(){ vv=$(this).attr('href');zz=(sub2+vv);$(this).attr('href', zz);}); 
var Punkt=$(this).html();$('#adminUL').append(Punkt); });} 
$.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>'); });}
$.get('profile.php?id='+UserID,'',UserMenu);
function UserMenu(data){
$(data).find('#profilenav ul').each(function(){  
var UsM=$(this).html();$('#UserUL').append(UsM); });}
$.get('messages.php','',UserMess);
function UserMess(data){
$(data).find('#profilenav ul').each(function(){  
var UMess=$(this).html();$('#UsMess').append(UMess); });}
</script>

+2

120

Респект!
Romych
А можешь еще сделать так, чтобы не налезали друг на друга пункты меню ( при выпадении (двойном)

0


Вы здесь » Единый форум поддержки » Архив » Создаем выплывающее меню