Компьютерный форум NoWa.cc Здесь может быть Ваша реклама
Правила Форума
редакция от 22.06.2020
Форум .::NoWa.cc::.
Вернуться   Компьютерный форум NoWa.cc > В помощь вебмастеру > Вeб Дизайн > CSS

Уважаемые пользователи nowa.cc. Мы работаем для вас более 20 лет и сейчас вынуждены просить о финансовой помощи по оплате за сервер.
Окажите посильную поддержку, мы очень надеемся на вас. Реквизиты для переводов ниже.
Webmoney Webmoney WMZ: Z021474945171 Webmoney WME: E159284508897 Webmoney WMUSDT: T206853643180
Кошелёк для вашей помощи YooMoney 4100117770549562
YooMoney Спасибо за поддержку!

Ответ
 
Опции темы Опции просмотра Language
Старый 01.10.2009, 09:19   #1
Неактивный пользователь
 
Регистрация: 20.08.2009
Сообщений: 2
Репутация: 0
По умолчанию Выпадающее меню с резиновыми кнопками

Подскажите, пожалуйста, делаю выпадающее меню с резиновыми кнопками в bitrix, шаблон интегрирован из artisteer. Я только начинаю изучать CSS, потому вопрос может быть глупым )

CSS-код меню из шаблона html:
Код:
/* begin Menu */
/* menu structure */

.artmenu a, .artmenu a:link, .artmenu a:visited, .artmenu a:hover
{
	text-align:left;
	text-decoration:none;
	outline:none;
	letter-spacing:normal;
	word-spacing:normal;
}

.artmenu, .artmenu ul
{
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}

.artmenu li
{
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;
	position: relative;
	z-index: 5;
	background:none;
}

.artmenu li:hover
{
	z-index: 10000;
	white-space: normal;
}

.artmenu li li
{
	float: none;
}

.artmenu ul
{
	visibility: hidden;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	background:none;
}

.artmenu li:hover>ul
{
	visibility: visible;
	top: 100%;
}

.artmenu li li:hover>ul
{
	top: 0;
	left: 100%;
}

.artmenu:after, .artmenu ul:after
{
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.artmenu, .artmenu ul
{
	min-height: 0;
}

.artmenu ul
{
	background-image: url(images/spacer.gif);
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
}

.artmenu ul ul
{
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
}


ul.artmenu
{
	float:right;
}


/* menu structure */

.artmenu
{
	padding: 3px 3px 3px 3px;
}

.nav
{
	position: relative;
	height: 28px;
	z-index: 100;
}

.nav .l, .nav .r
{
	position: absolute;
	z-index: -1;
	top: 0;
	height: 28px;
	background-image: url('images/nav.png');
}

.nav .l
{
	left: 0;
	right:0px;
}

.nav .r
{
	right: 0;
	width: 884px;
	clip: rect(auto, auto, auto, 884px);
}

/* end Menu */

/* begin MenuItem */
.artmenu ul li
{
	clear: both;
}

.artmenu a
{
	position:relative;
	display: block;
	overflow:hidden;
	height: 22px;
	cursor: pointer;
	text-decoration: none;
	margin-right: 3px;
	margin-left: 3px;
}

.artmenu a .r, .artmenu a .l
{
	position:absolute;
	display: block;
	height: 66px;
	background-image: url('images/MenuItem.png');
}

.artmenu a .l
{
	left:0;
	right:10px;
}

.artmenu a .r
{
	width:420px;
	right:0;
	clip: rect(auto, auto, auto, 410px);
}

.artmenu a .t 
{
	font-family: Georgia, "Times New Roman", Times, Serif;
	font-size: 11px;
	color: #373525;
	padding: 0 13px;
	margin: 0 10px;
	line-height: 22px;
	text-align: center;
}

.artmenu a:hover .l, .artmenu a:hover .r
{
	top:-22px;
}

.artmenu li:hover>a .l, .artmenu li:hover>a .r
{
	top:-22px;
}

.artmenu li:hover a .l, .artmenu li:hover a .r
{
	top:-22px;
}
.artmenu a:hover .t
{
	color: #000000;
}

.artmenu li:hover a .t
{
	color: #000000;
}

.artmenu li:hover>a .t
{
	color: #000000;
}


.artmenu a.active .l, .artmenu a.active .r
{
	top: -44px;
}

.artmenu a.active .t
{
	color: #000000;
}


/* end MenuItem */

/* begin MenuSeparator */
.nav .separator
{
	display: block;
	width: 1px;
	height: 22px;
	background-image: url('images/MenuSeparator.png');
}

/* end MenuSeparator */

/* begin MenuSubItem */
.artmenu ul a
{
	display:block;
	text-align: center;
	white-space: nowrap;
	height: 26px;
	width: 180px;
	overflow:hidden;
	line-height: 26px;
	margin-right: auto;


	background-image: url('images/subitem-bg.png');
	background-position: left top;
	background-repeat: repeat-x;
	border-width: 1px;
	border-style: solid;
	border-color: #AED959;
}

.nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
	display: inline;
	float: none;
	margin: inherit;
	padding: inherit;
	background-image: none;
	text-align: inherit;
	text-decoration: inherit;
}

.artmenu ul a, .artmenu ul a:link, .artmenu ul a:visited, .artmenu ul a:hover, .artmenu ul a:active, .nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
	text-align: left;
	text-indent: 12px;
	text-decoration: none;
	line-height: 26px;
	color: #445B15;
	font-family: Georgia, "Times New Roman", Times, Serif;
	font-size: 11px;
}

.artmenu ul ul a
{
	margin-left: auto;
}

.artmenu ul li a:hover
{
	color: #000000;
	border-color: #A9A47E;
	background-position: 0 -26px;
}

.artmenu ul li:hover>a
{
	color: #000000;
	border-color: #A9A47E;
	background-position: 0 -26px;
}

.nav .artmenu ul li a:hover span, .nav .artmenu ul li a:hover span span
{
	color: #000000;
}

.nav .artmenu ul li:hover>a span, .nav .artmenu ul li:hover>a span span
{
	color: #000000;
}


/* end MenuSubItem */
Мой CSS-код для компонента:
Код:
#horizontal-multilevel-menu,#horizontal-multilevel-menu ul
{
	margin:0; padding:0;
	background:#BC262C url(images/nav.png);
	min-height:28px;
	width:100%;
	list-style:none;
	font-size:11px;
	float:left;
	/*font-size:90%*/
}

#horizontal-multilevel-menu
{
	
}

/*Links*/
#horizontal-multilevel-menu a
{
	display:block;
	padding:5px 10px;
	/*padding:0.3em 0.8em;*/
	text-decoration:none;
	text-align:center;
        width: 120 px;

        background-image: url(images/MenuItem.png);
        height: 22 px;
        background-position: 0px -44px;
}

#horizontal-multilevel-menu a:active
{
	/*display:block;
	background-image: url(images/MenuItem.png);
        height: 22 px;
        background-position: 0px -44px;*/
}


#horizontal-multilevel-menu li 
{
        float:right;
}


/*Root items*/
#horizontal-multilevel-menu li a.root-item
{
	font-family: Georgia, "Times New Roman", Times, Serif;
	font-size: 11px;
        color:#373525;
	font-weight:normal;

        /*display:block;
        background-image: url('images/MenuItem.png');
        height: 22 px;
        width: auto;
        background-position: 0px -44px;
        color:#373525;*/
}

/*Root menu selected*/
#horizontal-multilevel-menu li a.root-item-selected
{
	background:#fc8d3d;
        color:#373525;
	font-weight:normal;
	padding:0 13px;
}

/*Root items: hover*/
#horizontal-multilevel-menu li:hover a.root-item, #horizontal-multilevel-menu li.jshover a.root-item
{
	background-image: url('images/MenuItem.png');
        text-align: center;
        height: 22 px;
        width: auto;
        background-position: 0px -22px;
        color:#373525;
}

/*Item-parents
#horizontal-multilevel-menu a.parent
{
	background: url(images/arrow.gif) center right no-repeat;
}*/


/*Child-items: hover*/
#horizontal-multilevel-menu li:hover, #horizontal-multilevel-menu li.jshover
{
	background:#D6D6D6;
	color:#fff;
}

/*Child-items selected*/
#horizontal-multilevel-menu li.item-selected
{
	background:#D6D6D6;
	color:#fff;
}

/*Sub-menu box*/
#horizontal-multilevel-menu li ul
{
	position:absolute;
	/*top:-999em;*/
	top:auto;
	display:none;
	z-index:500;

	height:auto;
	/*width:12em;*/
	width:135px;
	background:#F5F5F5;
	border:1px solid #C1C1C1;
}

/*Sub-menu item box*/
#horizontal-multilevel-menu li li 
{
	width:100%;
	border-bottom:1px solid #DEDEDE;
}

/*Item link*/
#horizontal-multilevel-menu li ul a
{
	text-align:left;
}

/*Items text color & size */
#horizontal-multilevel-menu li a,
#horizontal-multilevel-menu li:hover li a,
#horizontal-multilevel-menu li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li a
{
	color:#373525;
	font-weight:normal;
}

/*Items text color & size: hover*/
#horizontal-multilevel-menu li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover a
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover a
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li.jshover a
{
	color:#4F4F4F;
}

#horizontal-multilevel-menu li ul ul
{
	margin:-27px 0 0 132px;
	/*margin:-1.93em 0 0 11.6em;*/
}

#horizontal-multilevel-menu li:hover ul ul,
#horizontal-multilevel-menu li.jshover ul ul,
#horizontal-multilevel-menu li:hover ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul ul
{
	/*top:-999em;*/
	display:none;
}

#horizontal-multilevel-menu li:hover ul,
#horizontal-multilevel-menu li.jshover ul,
#horizontal-multilevel-menu li li:hover ul,
#horizontal-multilevel-menu li li.jshover ul,
#horizontal-multilevel-menu li li li:hover ul,
#horizontal-multilevel-menu li li li.jshover ul,
#horizontal-multilevel-menu li li li li:hover ul,
#horizontal-multilevel-menu li li li li.jshover ul,
#horizontal-multilevel-menu li li li li li:hover ul,
#horizontal-multilevel-menu li li li li li.jshover ul
{
	/*z-index:1000;
	top:auto;*/
	display:block;
}

div.menu-clear-left
{
	clear:left;
}

Что получается:


Как надо:

Проблема вот в чем: как выделить пункт меню, ссылающийся на активную страницу? (на данный момент выделяются все пункты меню)
И почему изображения для кнопок не резиновые, а слева закругленные, как и необходимо, а справа обрезанные?
orangemilky вне форума
 
Ответить с цитированием Вверх
Здесь может быть Ваша реклама
Здесь может быть Ваша реклама


Реклама: Магазин бытовой техники: hiberg i ddq9 10714 w - переходи на сайт ТАЙМТВ!барнхаус готовые проектыэлайнеры отзывы пациентов до и послеМебельный магазин: столик туалетный - Переходи на сайт!серьги золотые купить в спб


Ответ


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
монитор ASUS VW222U : проблема с кнопками dvolodia Скорая помощь 3 20.11.2009 05:39
Приблема с кнопками bonami Macromedia Flash 3 24.09.2009 10:36
Shop-Screept Free и выпадающее меню Gigo PHP 0 21.10.2008 00:08
выпадающее меню вверх ufo44 Вeб Дизайн 0 21.06.2008 04:24
Меню pitonka Microsoft Windows 3 11.06.2008 22:09

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход


Текущее время: 12:53. Часовой пояс GMT +3.


Copyright ©2004 - 2026 NoWa.cc

Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2026, vBulletin Solutions, Inc. Перевод: zCarot
Время генерации страницы 0.03495 секунды с 11 запросами