Верстка горизонтального меню с вертикальными полосками по краям

skiph · August 10, 2011

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

Как быть? Может кто-нибудь уже сталкивался с подобным?

Gaspode · August 10, 2011

li:hover {
    background: #цвет;
    border: none;
}

?

psywalker · August 10, 2011

А что тут трудного?

1) Вешаешь полоски на левые стороны каждого LI

2) При наведении меняешь фон каждого LI на жёлтый.

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

skiph · August 10, 2011

Да я то в принципе так и делал, но что-то с третьим пунктом не доходит...

делаю таким мокаром:

div#navigation ul.menu li {
	float: left;
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-image: none;
	background: url('../images/yellow-stripe.png') left center no-repeat #000;
}

div#navigation ul.menu li a {
	display: block;
	width: 244px;
	height: 16px;
	padding: 22px 0;
	text-align: center;
}

div#navigation ul.menu li a.active, div#navigation ul.menu li a:hover {
	background: #fff200;
}

Softlink · August 10, 2011

Можно недостаток inline-block превратить в его преимущество. Как-нибудь так например http://jsfiddle.net/Lyrcm/

skiph · August 10, 2011

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

SelenIT · August 10, 2011

Вот так

div#navigation ul.menu li a.active, div#navigation ul.menu li a:hover {
        background: #fff200;
        border-right: 2px solid #000; /* черная полоска */
        margin-right: -2px; /* наложение этой полоски на краюшек соседа */
        position: relative; /* и приподнимаем элемент над соседями, чтоб эта полоска оказалась выше */
}

не пойдет?

Softlink · August 10, 2011

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

Да, я заметил это сразу. Просто, т.с., мысли в слух были и тема подходящая появилась.

skiph · August 10, 2011

Вот так

div#navigation ul.menu li a.active, div#navigation ul.menu li a:hover {
        background: #fff200;
        border-right: 2px solid #000; /* черная полоска */
        margin-right: -2px; /* наложение этой полоски на краюшек соседа */
        position: relative; /* и приподнимаем элемент над соседями, чтоб эта полоска оказалась выше */
}

Все допер! :yahoo: Спасибо, помогло.

skiph · August 16, 2011

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

Ничего другого не приходит в голову как делать на подобие предыдущего, но тут проблема в том что размеры пунктов меню разные и ко всему прочему вылазят бока в разных браузерах, хотя использую reset.css в Опере например отступы больше получаются чем в Мозилле и Осле.

Вот мой код (и это без тени вокруг меню):


div#navigation {
	width: 1012px;
	height: 48px;
	clear: both;
	margin: 8px auto;
}
div#navigation ul.menu  {
	margin: 0 2px;
}

div#navigation ul.menu li {
	background: url('../images/menu-bg.png') repeat-x;
	display: block;
	float: left;
	list-style-type: none;
	list-style-image: none;
}

div#navigation ul.menu li a {
	display: block;
	background: url('../images/menu-border.png') left center no-repeat;
	text-align: center;
	padding: 16px 34px;
}
div#navigation ul.menu li.first a {
	background: none;
}

div#navigation ul.menu li a.active, div#navigation ul.menu li a:hover {
	background: url('../images/menu-hover.png') center repeat-x;
	border-right: 1px solid transparent;
	margin-right: -1px; 
	position: relative;
	z-index: 1;
}

при этом пункты меню слазят немного влево, если выровнять пэддингами, то в Опере наоборот все съезжает, так как отступы больше получаются. А вот такое меню получается на практике. Пробовал сделать цельным желтый бэкграунд, но тогда ховер не до конца заполняет последний пункт.

Edited August 16, 2011 by skiph

psywalker · August 16, 2011

skiph, Не подойдёт? http://forum.htmlbook.ru/index.php?showtopic=28635&view=findpost&p=216104

skiph · August 16, 2011

skiph, Не подойдёт? http://forum.htmlbook.ru/index.php?showtopic=28635&view=findpost&p=216104

возможно, но как сэмулировать справа фон? Точно ведь не угадаешь сколько нужно пикселей. В той же опере будет по другому выглядеть.

psywalker · August 16, 2011

skiph, Не подойдёт? http://forum.htmlbook.ru/index.php?showtopic=28635&view=findpost&p=216104
возможно, но как сэмулировать справа фон? Точно ведь не угадаешь сколько нужно пикселей. В той же опере будет по другому выглядеть.

А ты можешь сделать тестовую страницу с примером. И показать скриншоты того, как нужно, чтобы было, во всех состояниях и как не нужно.

Чтобы я точно увидел, что за картинки и т.д.

И ещё вопрос:

Точно ведь не угадаешь сколько нужно пикселей.

О каких пикселях идёт речь? Что ты имеешь ввиду?

skiph · August 16, 2011

skiph, Не подойдёт? http://forum.htmlbook.ru/index.php?showtopic=28635&view=findpost&p=216104
возможно, но как сэмулировать справа фон? Точно ведь не угадаешь сколько нужно пикселей. В той же опере будет по другому выглядеть.
А ты можешь сделать тестовую страницу с примером. И показать скриншоты того, как нужно, чтобы было, во всех состояниях и как не нужно.
Чтобы я точно увидел, что за картинки и т.д.
И ещё вопрос:
Точно ведь не угадаешь сколько нужно пикселей.
О каких пикселях идёт речь? Что ты имеешь ввиду?

Вот например, специально сделал короткие подписи к пунктам меню http://tarja.ho.ua/test-html

Как собственно их растянуть по всей длине желтой полосы? При том что текст может быть разной длины. Сделал фон из цельной картинки, так как по дизайну в любом случае должен торчать сбоку блок со сменой языка.

На этом скриншоте эталон как должно вообще по идее быть (то есть пункты меню заполняют всю полоску меню). В принципе так как я делаю все получается так как нужно, кроме последнего пункта меню. При наведении там или не до конца заливается ховер или наоборот вылазит за область.

psywalker · August 16, 2011

skiph, Вроде ясно, ну а ИЕ6-7 нужны?

И меню должно быть фикс по ширине?

skiph · August 16, 2011

skiph, Вроде ясно, ну а ИЕ6-7 нужны?
И меню должно быть фикс по ширине?

по первому необязательно в принципе. Я обычно на 8 максимум обращаю внимание.

по второму я пробовал делать нефикс, но получается не будет соответствовать дизайну, так что фиксированное это самое то в данном случае...

psywalker · August 16, 2011

Пойдёт, дружище?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">


* { margin: 0; padding: 0;}
body {
	background-color: #262626;
	margin: auto;
	width: 100%;
}

/* Menu */
div#navigation {
	width: 1015px;
	height: 54px;
	background: url('http://tarja.ho.ua/test-html/menu-bg.png') left top no-repeat;
	clear: both;
	margin: 8px auto;
	overflow: hidden;

}
div#navigation ul.menu { margin-left: 3px;  margin-top: -2px; width: 100%; display: table;}
div#navigation ul.menu li {


	display: table-cell;

}

div#navigation ul.menu li a {
	display: block;
	background: url('http://tarja.ho.ua/test-html/menu-border.png') left center no-repeat;
	text-align: center;
	padding: 17px 35px;
}
div#navigation ul.menu li.first a {
	background: none;
}

div#navigation ul.menu li a.active, div#navigation ul.menu li a:hover {
	background: url('http://tarja.ho.ua/test-html/menu-hover.png') center repeat-x;
	border-right: 1px solid transparent;
	margin-right: -1px; 
	position: relative;
	z-index: 1;
}
div#navigation ul.menu li.first {

}



</style>
</head>
<body>

<div id="navigation">
    <ul class="menu">
        <li class="leaf first"><a href="#">Item 1</a></li>

        <li class="leaf"><a href="#">Item 2</a></li>
        <li class="leaf"><a href="#">Item 3</a></li>
        <li class="leaf"><a class="active" href="#">Item 3</a></li>
        <li class="leaf"><a href="#">Item 4</a></li>
        <li class="leaf last"><a href="#">Item 5</a></li>
    </ul>
</div>

</body>
</html>

skiph · August 16, 2011

psywalker, вот это точно оно, спасибо! Главное, что я пробовал делать через table тоже, видимо не хватило опыта правильно применить...

psywalker · August 16, 2011

psywalker, вот это точно оно, спасибо! Главное, что я пробовал делать через table тоже, видимо не хватило опыта правильно применить...

Рад был помочь

Sign In

Верстка горизонтального меню с вертикальными полосками по краям

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information