Invisible Man Отключи пока Объявление
Создаем выплывающее меню
Сообщений 101 страница 120 из 144
Поделиться102Чт, 17 Мар 2011 17:51:39
Invisible Man
я уже давно сделал новую версию этого меню, минут через 20 выложу
Поделиться103Чт, 17 Мар 2011 18:00:12
я уже давно сделал новую версию этого меню, минут через 20 выложу
Ех..опять на свой лад переделывать Корошо жду
Поделиться104Чт, 17 Мар 2011 18:08:38
Но вот бегунок (скрин*) в браузере не убирается не каким способом..
<style type="text/css">
#pun-navlinks h2 {display:none;}
#pun-navlinks.section{
display: block;
position: relative;
z-index: 500;left: 8em;
Это убери
Поделиться105Чт, 17 Мар 2011 18:20:20
собственно хотелось добиться универсальности,
чтоб при установке этого меню вид вашего обычного не менялся и не смещался, ни влево, ни в право и избежать необходимости в скрипте прописывать вручную адрес форума, как это было в предыдущих версиях,
скрипт меню существенно сократился и сделан уже с правильным подходом, т.е. я уже в нём ничего не скрываю от гостей или пользователей,
а пристраиваю своё меню к стандартному,
поэтому гости и так не видят тех пунктов, которые им не положено и пользователи не видят пункт Администрирование со всеми вытекающими (от гостей я скрыл только пункт Участники),
а админ видит всё что и должен видеть,
вся задача этого меню заключается в ускорении доступа к тем пунктам, которые нужны: Админу, модеру, пользователю
и исключить лишние переходы по страницам,
в меню так же добавлен выпадающий список участников (сделан на 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 не мой конёк, надеюсь кто-нибудь доведёт стиль меню до совершенства и универсальности
Поделиться106Вс, 24 Апр 2011 14:27:52
Здравствуйте, подскажите, пожалуйста, как можно сделать так, чтобы первый контейнер всегда был по умолчанию открыт?
вот как тут
http://hproleplay.mybb.ru/
заходишь на страницу, и колонка Новости всегда автоматически открыта.
заранее спасибо
и еще интересно как сделать, чтобы контейнеры не раскрывались, а плавно переключались, всё так же как на вышеуказанном форуме.
К сожалению, вставить ссылку на свой форум не могу, потому как он только в стадии разработки и еще не сделан
Поделиться107Вс, 24 Апр 2011 15:41:16
Shoichi Закажите в заказах таблиц или полистайте готовое(последние 10-13страниц - там есть коды
Поделиться108Вс, 24 Апр 2011 15:45:39
Shoichi Закажите в заказах таблиц или полистайте готовое(последние 10-13страниц - там есть коды
Это не стандартное выплывающее меню, даже я вижу сразу, вряд ли там будет точно такое же, поэтому я и написал сюда в надежде, что кто-то может мне помочь.
Мне не нужна таблица с этим кодом, таблицу я и сам в состоянии сделать. всё что мне нужно - код на переключающееся меню с по умолчанию открытым первым контейнером
Поделиться109Вс, 24 Апр 2011 16:22:13
Shoichi
Поделиться110Вс, 2 Окт 2011 18:57:44
в общем-то всё, единственное что мне пока не удалось, это того что меню всё же смещается, 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)
Поделиться111Чт, 24 Ноя 2011 00:42:22
вобщем вот испраленный вариант (html верх)
все прекрасно, только как можно заставить выплывающее меню либо подольше задерживаться после того как курсор смещается с основной надписи, либо как-то слева выплывать, а то не получается так быстро навести курсор, чтобы не исчезало это поле.
А то оно пропадает как только я смещаю курсор...
прошу помощи )
Поделиться112Чт, 24 Ноя 2011 21:07:33
Wiv
Ссылку на форум с установленным кодом - юзер ник пароль (выложите под 300 сообщений)- коли нет пиар логина
Поделиться113Чт, 24 Ноя 2011 21:57:58
Ссылку на форум с установленным кодом
юзер ник пароль (выложите под 300 сообщений)- коли нет пиар логина
есть вход для рекламы...
вам какой ник и пароль нужен? администрации?
Поделиться114Чт, 24 Ноя 2011 22:17:30
есть вход для рекламы...
Попробуйте добавить к скрипту строку красным
<!--Выпадающее главное меню-->
<style>#pun-navlinks ul li{padding-bottom:10px}</style>
<script type="text/javascript">
$(function() {if (GroupID==3) {
$('.nog').parent().hide();}
...
Поделиться115Чт, 24 Ноя 2011 22:23:44
Deff
большое спасибо )
а можно еще поинтересоваться где именно в скрипте можно поменять цвет подложки (а лучше вставить графический фон картинкой) и шрифта в выпадающем меню?
Отредактировано Wiv (Чт, 24 Ноя 2011 22:24:51)
Поделиться116Чт, 24 Ноя 2011 22:29:32
а можно еще поинтересоваться где именно в скрипте можно поменять цвет подложки и шрифта в выпадающем меню?
Пробуйте через css
<style>
#pun-navlinks.section ul.container li:hover ul{
background-color:#CFEAB1!important;
color:#ffffff!important;
}
</style>
Поделиться117Чт, 24 Ноя 2011 22:31:54
а лучше вставить графический фон картинкой)
<style>
#pun-navlinks.section ul.container li:hover ul{
background-color:transparent!important;
background-image:url(Ccылка на картинку)!important;
color:#ffffff!important;
}
</style>
Поделиться118Чт, 24 Ноя 2011 22:32:44
Пробуйте через css
спасибо за помощь )
Отредактировано Wiv (Чт, 24 Ноя 2011 22:33:29)
Поделиться119Сб, 17 Мар 2012 03:07:57
Выпадающее главное меню. v5
(на ajax запросах)
после того как починили кодировку и криллица стала отображаться, захотелось побаловаться с меню, пункты которого формируются через ajax запросы,
чем такое меню интереснее предыдщих вариантов,тем что не надо вручную добавлять новые пункты, которые периодически появляются с добавлением нового функционала на форуме (Файлы, Резервные копии и т.д.)
выпадающими кроме Админменю, являются пункты Профиль, Сообщения и список Участников
в 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>
Поделиться120Сб, 17 Мар 2012 10:52:28
Респект!
Romych
А можешь еще сделать так, чтобы не налезали друг на друга пункты меню ( при выпадении (двойном)