Нижний Край Для Выпадающего Css Меню.

Luminar · September 8, 2010

Всем добрый день! Надеюсь кто-то сможет помочь... На своем сайте я хочу реализовать выпадающее меню на чистом CSS в виде раскрывающегося свитка. Условный пример:

На данный момент я прикрутил меню по подобию http://www.projectseven.com/tutorials/navi...de/workpage.htm

HTML-код (Заранее извиняюсь за длинный код).

 <link href="p7exp/p7exp.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="p7exp/p7exp.js"></script>
<!--[if lte IE 7]>
<style>
#menuwrapper, #p7menubar ul a {height: 1%;}
a:active {width: auto;}
</style>
<![endif]-->

</head>

<body onLoad="P7_ExpMenu()">
<div id="menuwrapper">
<ul id="p7menubar">
<li><a href="#">Home</a></li>
<li><a class="trigger" href="#">Trigger One</a>
<ul>
<li><a href="#">Sub 1.1</a></li>
<li><a href="#">Sub 1.2</a></li>
<li><a href="#">Sub 1.3</a></li>
<li><a href="#">Sub 1.4</a></li>
</ul>
</li>
<li><a class="trigger" href="#">Trigger Two</a>
<ul>
<li><a href="#">Sub 2.1</a></li>
<li><a href="#">Sub 2.2</a></li>
<li><a href="#">Sub 2.3</a></li>
<li><a href="#">Sub 2.4</a></li>
<li><a  href="#">Sub 2.5</a></li>
</ul>
</li>
<li><a class="trigger" href="#">Trigger Three</a>
<ul>
<li><a href="#">Sub 3.1</a></li>
<li><a href="#">Sub 3.2</a></li>
<li><a href="#">Sub 3.3</a></li>
<li><a href="#">Sub 3.4</a></li>
<li><a href="#">Sub 3.5</a></li>
<li><a href="#">Sub 3.6</a></li>
<li><a href="#">Sub 3.7</a></li>
<li><a href="#">Sub 3.8</a></li>
</ul>
</li>
</ul>
<br class="clearit">
</div>
</body>
</html>

CSS-код:

body {	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 100%;
	background-color: #FFFFFF;
	margin: 24px 0;
	padding: 0;
	background-image: url(images/p7exp_pbg.jpg);
	background-repeat: repeat-x;}
#menuwrapper {border-top: 1px solid #000;
	border-bottom: 1px solid #333;
	background-color: #909090;
	background-image: url(images/p7exp_mbar.jpg);
	background-repeat: repeat-x;}
.clearit {clear: both;
	height: 0;
	line-height: 0.0;
	font-size: 0;}
#p7menubar, #p7menubar ul {	padding: 0;
	margin: 0;
	list-style: none;
	font-family: Arial, Helvetica, sans-serif;}
#p7menubar a {	display: block;
	text-decoration: none;
	padding: 5px 10px 5px 10px;
	border-right: 1px solid #333;
	font-size: .85em;
	color: #CCCCCC;}
#p7menubar a.trigger {	padding: 5px 16px 5px 10px;
	background-image: url(images/p7PM_dark_south.gif);
	background-repeat: no-repeat;
	background-position: right center;}
#p7menubar li {	float: left;
	width: 9em;}
#p7menubar li ul, #p7menubar ul li  {	width: 12em;}
#p7menubar ul li a  {	color: #565656;
	border-right: 0;
	padding: 3px 12px 3px 16px;}
#p7menubar li ul {	position: absolute;
	display: none;
	background-color: #FFFFFF;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	background-image: url(images/p7exp_mgrad.jpg);
	background-repeat: repeat-x;}
#p7menubar li:hover a, #p7menubar a:focus,
#p7menubar a:active, #p7menubar li.p7hvr a {
	color: #000000;
	background-color: #C19674;}
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {display: block;}
#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {color: #000000;
	background-color: transparent;}
#p7menubar ul a:hover {background-color: #606060!important;
	color: #FFFFFF!important;}
#p7menubar li {width: auto;}

Всё работает как надо... не хватает только нижней картинки (3-й в примере) , я просто не знаю как её добавить... Подскажите пожалуйста можно ли назначить картинку в нижний край выпадающих пунков CSS меню (в случае свитка - перевернутую первую картинку)?

Edited September 8, 2010 by Luminar

psywalker · September 8, 2010

А ты её абсолютом прижми к нижнему краю LI у выпадающего списка.

Luminar · September 8, 2010

А ты её абсолютом прижми к нижнему краю LI у выпадающего списка.

Спасибо за ответ! А не подскажешь в какое место кода нужно засунуть абсолютное позиционирование? А то я пока ламер каких ещё поискать...

Наверное куда-то сюда... :lol:

#p7menubar li ul {	position: absolute;
	display: none;
	background-color: #FFFFFF;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	background-image: url(images/p7exp_mgrad.jpg);
	background-repeat: repeat-x;}

psywalker · September 8, 2010

Нее, в элемент LI выпадающего меню.

#p7menubar li ul li

Luminar · September 8, 2010

Нее, в элемент LI выпадающего меню.
#p7menubar li ul li

ОК! Буду пробовать! Сенк!

psywalker · September 8, 2010

ОК! Буду пробовать! Сенк!

Давай, удачи тебе :lol:

Luminar · September 9, 2010

Немного по-другому решил проблему - добавил еще 1 пустой элемент списка (LI) в каждый столбец и вставил в него подходящую по размеру и фактуре картинку.

Кстати, никто не знает можно ли задать толщину и цвет линии обводки ("<b></b>") для текста? (сорри что не по теме)

Edited September 9, 2010 by Luminar

Luminar · September 9, 2010

Хмм... почему-то в опере картинка ложится корректно - без зазора внизу, а в ИЕ и Фаирфоксе с зазором в несколько пикселей. Кто-нибудь знает как это поправить и убрать зазор?

Текущий результат можно посмотреть если подвести курсор под 2-й раздел "Trigger Two" (ссылка http://adrianos.arvixe.ru/CSS.html)

Там внизу вложена картинка, но она почему-то выводится с отступом от нижнего края...

Edited September 9, 2010 by Luminar

Luminar · September 9, 2010

Все разобрался!!! =)

Sign In

Нижний Край Для Выпадающего Css Меню.

Question

Luminar

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Luminar

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Luminar

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Luminar

Link to comment

Share on other sites

Luminar

Link to comment

Share on other sites

Luminar

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information