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

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

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


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


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

Сообщений 1 страница 20 из 144

1

Первым действием создадим небольшой список, который в последствии и станет нашим меню

Код:
<ul id="menu-css">
<li>1<ul><li>Подсказка 1</li></ul></li>
<li>2<ul><li>Подсказка 2</li></ul></li>
<li>3<ul><li>Подсказка 3</li></ul></li>
<li>4<ul><li>Подсказка 4</li></ul></li>
</ul>

и предадим ему вид горизонтального меню

Код:
<style type="text/css">
#menu-css
{
	margin: 0; 
	padding: 0; 
	list-style: none; 
}
#menu-css li
{ 
	position: relative; 
	float: left;
	margin: 3px;
}
</style>

Теперь спрячем подсказки, ведь они должны появляться только при наведении мышки

Код:
<style type="text/css">
li ul 
{ 
	position: absolute; 
	display: none; 
	border: 1px solid black;
	background: #DADADA
}
</style>

Ну и наконец, последним действием мы заставим подсказку появляться при наведении мышки на текст

Код:
<style type="text/css">
li:hover ul{display: block;}
</style>


Тема создана для того, чтобы откорректировать данную инструкцию и она стала понятной для пользователей. Потому здесь может быть задан вопрос :)

+4

2

а можно посмотреть как это выглядит в живую?

0

3

Andatr@
http://forum.russ-forum.ru/

0

4

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

в html-верх
вставил вот это:

Код:
<style>
	/* AUC containers */
	.menu_container {
background:#E4E5E7 url(../../img/[color=blue]Mybb_Invision_Green[/color]/menu.png) repeat-x scroll 0 0;
clear:right;
color:#D6D7D4;
font-size:10px;
height:30px;
margin-left:0;
padding:8px 0 0 200px;
text-transform:uppercase;
	}

	.menu_member_photo {
margin: 0px 5px 0px 0px;
height: 24px;
float: left;
	}


	/* Root = Horizontal, Secondary = Vertical */
	#navmenu-h {
position:relative;
z-index: 1000;
	}

	.menu_container ul#navmenu-h {
margin: 0px;
border: 0px;
padding: 0px;
width: 980px; /*For KHTML*/
list-style: none;
height: 24px;
	}

	.menu_container ul#navmenu-h li {
margin: 0px 20px 0px 0px;
padding: 0px;
border: 0px;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
	}

	.menu_container ul#navmenu-h ul {
margin: 0px;
border: 0px;
padding: 0px 0px 12px 0px;
width: 175px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0px;
background-image: url(http://www.acrobatusers.com/sites/all/themes/auc_v3/images/menu_bottom.gif);
background-repeat: no-repeat;
background-position: 0 bottom;
	}

	.menu_down_arrow {
background-image: url(http://www.acrobatusers.com/sites/all/themes/auc_v3/images/menu_arrow_down.gif);
background-repeat: no-repeat;
background-position: 10px 17px;
	}
	.menu_down_arrow_photo {
background-image: url(http://www.acrobatusers.com/sites/all/themes/auc_v3/images/menu_arrow_down.gif);
background-repeat: no-repeat;
background-position: 47px 17px;
	}

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

	.menu_container ul#navmenu-h ul li {
width: 175px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
	}

	/* Root Menu */
	.menu_container ul#navmenu-h a {
	-x-system-font:none;
	background-attachment:scroll;
	background-image:none;
	background-position:0 0;
	background-repeat:repeat;
	color:#555555;
	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 */
	.menu_container ul#navmenu-h a:hover, .menu_container ul#navmenu-h li:hover a, .menu_container ul#navmenu-h li.iehover a {
color: #ffcc33;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0 0;
	}

	/* 2nd Menu */
	.menu_container ul#navmenu-h li:hover li a, .menu_container ul#navmenu-h li.iehover li a {
float: none;
bbackground: #bf2c2b;
color: #fff;
	}

	/* 2nd Menu Hover Persistence */
	.menu_container ul#navmenu-h li:hover li a:hover, .menu_container ul#navmenu-h li:hover li:hover a, .menu_container ul#navmenu-h li.iehover li a:hover, .menu_container ul#navmenu-h li.iehover li.iehover a {
background: #555555;
color: #ffcc33;
	}

	/* 3rd Menu */
	.menu_container ul#navmenu-h li:hover li:hover li a, .menu_container ul#navmenu-h li.iehover li.iehover li a {
	  background: #EEE;
	  color: #666;
	}

	/* 3rd Menu Hover Persistence */
	.menu_container ul#navmenu-h li:hover li:hover li a:hover, .menu_container ul#navmenu-h li:hover li:hover li:hover a, .menu_container ul#navmenu-h li.iehover li.iehover li a:hover, .menu_container ul#navmenu-h li.iehover li.iehover li.iehover a {
	  background: #CCC;
	  color: #FFF;
	}

	/* 4th Menu */
	.menu_container ul#navmenu-h li:hover li:hover li:hover li a, .menu_container ul#navmenu-h li.iehover li.iehover li.iehover li a {
	  background: #EEE;
	  color: #666;
	}

	/* 4th Menu Hover */
	.menu_container ul#navmenu-h li:hover li:hover li:hover li a:hover, .menu_container ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
	  background: #CCC;
	  color: #FFF;
	}

	.menu_container ul#navmenu-h ul ul, ul#navmenu-h ul ul ul {
	  display: none;
	  position: absolute;
	  top: 0;
	  left: 160px;
	}

	/* Do Not Move - Must Come Before display:block for Gecko */
	.menu_container ul#navmenu-h li:hover ul ul, .menu_container ul#navmenu-h li:hover ul ul ul, .menu_container ul#navmenu-h li.iehover ul ul, .menu_container ul#navmenu-h li.iehover ul ul ul {
	  display: none;
	}

	.menu_container ul#navmenu-h li:hover ul, .menu_container ul#navmenu-h ul li:hover ul, .menu_container ul#navmenu-h ul ul li:hover ul, .menu_container ul#navmenu-h li.iehover ul, .menu_container ul#navmenu-h ul li.iehover ul, .menu_container ul#navmenu-h ul ul li.iehover ul {
	  display: block;
	}
</style>[/quote]
в Объявление следующее:

[quote]<!-- Navigation Container -->
<div id="pun-navlinks">
	<div class="menu_container">
<ul id="navmenu-h">
            <li id="navindex"><a href="http://[color=blue]testing.1bb.ru[/color]/"><span>Форум</span></a></li>
            <li id="navuserlist"><a href="http://testing.1bb.ru/userlist.php" rel="nofollow"><span>Участники</span></a></li>
            <li id="navsearch"><a href="http://testing.1bb.ru/search.php"><span>Поиск</span></a></li>
<li id="navprofile" class="menu_down_arrow"><a href="http://testing.1bb.ru/profile.php?id=">Профиль</a>
      <ul>
            <li><a href="http://testing.1bb.ru//profile.php?section=personal&id=">Персональный</a></li>
            <li><a href="http://testing.1bb.ru/profile.php?section=messaging&id=">Общения</a></li>
            <li><a href="http://testing.1bb.ru/profile.php?section=avatar&id=">Аватар</a></li>
            <li><a href="http://testing.1bb.ru/profile.php?section=signature&id=">Подпись</a></li>
            <li><a href="http://testing.1bb.ru/profile.php?section=display&id=">Отображения</a></li>
            <li><a href="http://testing.1bb.ru/profile.php?section=display&id=">Приватность</a></li>
            <li><a href="http://testing.1bb.ru/profile.php?section=fields&id=">Остальное</a></li>
            <li><a href="http://testing.1bb.ru/profile.php?section=admin&id=">Управление</a></li>
      </ul>
</li>
<li id="navpm" class="menu_down_arrow"><a href="http://testing.1bb.ru//messages.php">Cообщения</a>
      <ul>
            <li><a href="http://testing.1bb.ru/messages.php?box=0">Входящие</a></li>
            <li><a href="http://testing.1bb.ru/messages.php?box=1">Отправленные</a></li>
            <li><a href="http://testing.1bb.ru//messages.php?action=new">Новое сообщение</a></li>
      </ul>
</li>
<li id="navadmin" class="menu_down_arrow"><a href="http://testing.1bb.ru/admin_index.php">Администрирование</a>
      <ul>
            <li><a href="http://testing.1bb.ru/admin_categories.php">Категории</a></li>
            <li><a href="http://testing.1bb.ru/admin_forums.php">Форумы</a></li>
            <li><a href="http://testing.1bb.ru/admin_users.php">Пользователи</a></li>
            <li><a href="http://testing.1bb.ru/admin_groups.php">Группы</a></li>
            <li><a href="http://testing.1bb.ru/admin_options.php">Настройки</a></li>
            <li><a href="http://testing.1bb.ru/admin_permissions.php">Права</a></li>
            <li><a href="http://testing.1bb.ru/admin_censoring.php">Цензура</a></li>
            <li><a href="http://testing.1bb.ru/admin_ranks.php">Ранги</a></li>
            <li><a href="http://testing.1bb.ru/admin_bans.php">Блокировка</a></li>
            <li><a href="http://testing.1bb.ru/admin_logs.php">Логи</a></li>
            <li><a href="http://testing.1bb.ru/admin_prune.php">Чистка</a></li>
            <li><a href="http://testing.1bb.ru/admin_massmail.php">Рассылка</a></li>
            <li><a href="http://testing.1bb.ru/admin_fields.php">Поля</a></li>
            <li><a href="http://testing.1bb.ru/admin_style.php">Стиль</a></li>
            <li><a href="http://testing.1bb.ru/admin_pages.php">Страницы</a></li>
            <li><a href="http://testing.1bb.ru/admin_promotion.php">Раскрутка</a></li>
      </ul>
</li>
            <li id="navlogout"><a href="http://testing.1bb.ru//login.php?action=out&amp;id=2"><span>Выход</span></a></li>
</ul><!-- auc nav menus: cache generated 02:32 -->

	</div>
	<div class="clear_both"></div>
</div><!-- end Navigation Container -->

то что получилось можно посмотреть ЗДЕСЬ

тут понятно, что в данном варианте меню во всей красе видят и гости, но пока этим вопросом не занимался

прошу поделиться вашими мыслями и идеями (стоит ли оно того и есть ли в этом смысл?)

Отредактировано Romych (Вс, 20 Дек 2009 21:39:52)

+1

5

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

прошу поделиться вашими мыслями и идеями (стоит ли оно того и есть ли в этом смысл?)

Смысл безусловное есть, так как это даёт возможность скрыть стандартное меню и разместить своё собственное в удобном  месте.
Вообще, есть некоторые идеи, как его можно усовершенствовать, но, думаю, будет логично высказать их тогда, как меню будет готово.
Пока с меня + за нужную вещь.

Отредактировано rps (Сб, 3 Апр 2010 16:57:10)

0

6

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

0

7

скрины меню в студию, на форумах не найти

0

8

russian
http://forum.russ-forum.ru/ лень делать скрин, простите

0

9

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

скрины меню в студию, на форумах не найти

это гoворит о том, что удалось скрыть нужные элементы выпадающего главного меню от гостей,
значит всё работает :)

http://s47.radikal.ru/i118/1001/99/0765c49fe016t.jpg

Отредактировано Romych (Ср, 13 Янв 2010 23:40:49)

0

10

так я немного не поняла тут
это всё копируется вот так
<ul id="menu-css">
<li>1<ul><li>Подсказка 1</li></ul></li>
<li>2<ul><li>Подсказка 2</li></ul></li>
<li>3<ul><li>Подсказка 3</li></ul></li>
<li>4<ul><li>Подсказка 4</li></ul></li>
</ul>
<style type="text/css">
#menu-css
{
margin: 0;
padding: 0;
list-style: none;
}
#menu-css li
{
position: relative;
float: left;
margin: 3px;
}
</style>
<style type="text/css">
li ul
{
position: absolute;
display: none;
border: 1px solid black;
background: #DADADA
}
</style>
<style type="text/css">
li:hover ul{display: block;}
</style>

и ставится в объявление?

я на некоторых форумах видела что не при наведении мышки а при клике выпадает окошко
как это?

0

11

Катарина
Вам другое нужно, раз хотите

Катарина написал(а):

я на некоторых форумах видела что не при наведении мышки а при клике выпадает окошко

Выпадающее меню для форума

+1

12

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

Вам другое нужно, раз хотите

Ой ошиблась значит)

0

13

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

Смысл безусловное есть, така как это даёт возможность скрыть стандартное меню и разместить своё собственное в удобном  месте.Вообще, есть некоторые идеи, как его можно усовершенствовать, но, думаю, будет логично высказать их тогда, как меню будет готово.

вот доработанный вариант выпадающего главного меню
спасибо mkusherу за содействие
для работы меню требуется наличие jQuery
в меню реализованна анимация плавного появления

с помощью вот этого скрипта
html-низ:

Код:
<script type="text/javascript">

//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', 'http://testing.1bb.ru/uploads/000b/89/6b/16-1.gif', 23], right:['rightarrowclass', 'http://testing.1bb.ru/uploads/000b/89/6b/16-2.gif']}

var jqueryslidemenu={

animateduration: {over: 400, 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>'

     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 );
             });
    
             }
     });
</script>

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

стиль меню можно сделать в разных вариантах
естественно в html-верх:

вариант №1

Код:
<style>
	#pun-navlinks.section{
display: block;
position: relative;
left: 4em;
	}
	#pun-navlinks.section ul.container {
margin: 0px;
border: 0px;
padding: 0px;
width: 980px; /*For KHTML*/
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;
left: -5px;
background-image: url(http://www.acrobatusers.com/sites/all/themes/auc_v3/images/menu_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: #2be101;
	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;}
</style>

вариант №2

Код:
<style type="text/css">
#pun-navlinks.section {
font: bold 11px Verdana;
background: #414141;
width: 900px;
margin:0 auto;
line-height: 0;
}

#pun-navlinks.section ul.container {
margin: 0;
padding: 0;
position: relative;
z-index: 9999;
list-style-type: none;
}

/*Top level list items*/
#pun-navlinks.section ul.container li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
#pun-navlinks.section ul.container li a{
display: block;
background: #B4D2B3; /*background of tabs (default state)*/
color: white;
padding: 4px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html #pun-navlinks.section ul.container li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

#pun-navlinks.section ul li a:link, #pun-navlinks.section ul.container li a:visited{
color: black;
}

#pun-navlinks.section ul.container li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
	
/*1st sub level menu*/
#pun-navlinks.section ul.container li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
#pun-navlinks.section ul.container li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
#pun-navlinks.section ul.container li ul li ul{
top: 0;
}

/* Sub level menu links style */
#pun-navlinks.section ul.container li ul li a{
font: normal 12px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

#pun-navlinks.section ul.container li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

</style>

можно комбинировать

какие будут идеи?

Отредактировано Romych (Сб, 27 Фев 2010 23:03:53)

0

14

Romych
А пример где можно посмотреть?

0

15

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

А пример где можно посмотреть?

по идее здесь - http://rock.3bb.ru/, но поскольку от гостей выпадающие пункты скрыты, вряд ли без регистрации удастся увидеть,
для пользователей открываются пункты Профиля

вот скрин
http://radikal.ru/F/s47.radikal.ru/i118/1001/99/0765c49fe016.jpg

0

16

Romych
Где-то z-index не хватает, ибо у меня, когда курсор попадает на проблел, между пунктами меню, блок исчезает.

Кстати, а ещё можно (по желанию) сделать анимацию исчезновения.

0

17

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

Кстати, а ещё можно (по желанию) сделать анимацию исчезновения.

заменить эффект slide на fade
думаю можно,
мысль понял, попробую

0

18

Romych

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

Где-то z-index не хватает, ибо у меня, когда курсор попадает на проблел, между пунктами меню, блок исчезает.

А с этим как? Исправимо?

0

19

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

Где-то z-index не хватает, ибо у меня, когда курсор попадает на проблел, между пунктами меню, блок исчезает.

хм... у меня всё нормально, но конечно всё поправимо и настраиваемо
с первым вариантом стиля вообще никаких пробелов нет, в выпадающих элементах

0

20

А как убрать стандартное меню?Типа 2 меню?http://trpirk.artbb.ru/.Это тестовик

0


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