как сделать это меню - HTML и CSS

vanooo · 12.02.2012, 19:58

Ребят подскажите как сделать такое меню (без картинок желательно,можете написать код css и html ).
вот картинка ,по ней надо

Помогите,плиз.

segail · 12.02.2012, 20:38

Цитата:

Сообщение от vanooo

Ребят подскажите как сделать такое меню (без картинок желательно,можете написать код css и html ).
вот картинка ,по ней надо

Помогите,плиз.

Что то подобное можно сделать в CSS Menu Generator

titan2012 · 13.02.2012, 00:46

Цитата:

Сообщение от vanooo

Ребят подскажите как сделать такое меню (без картинок желательно,можете написать код css и html ).
вот картинка ,по ней надо

Помогите,плиз.

а можешь скинуть ссылку сайта где такое меню ты увидел?

_J_ · 13.02.2012, 01:04

Вот мой вариант твоего меню.
В зависимости от выбранного пункта меню, меняется id пункта. По умолчанию треугольничек принимает цвет фона, если уменьшить высоту меню то можно увидеть этот треугольник)) Когда присваивается id="selected" шрифт становится белый и треугольник меняет цвет на белый.

Значек в коде ▲ замени на: & # 9650;
без пробелов

Код:

<!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>
    <title>Menu</title>
    <style type="text/css">
    a{color:#d2d9eb; text-decoration:none;}
    ul {list-style:none;font-size:16px;  }
    ul li {float:left;margin:10px 10px 0 0;padding:5px 5px 5px 5px; text-align:center;}
    #menu {background-color:#5b6984; color:white;height:51px; text-align:center;}
    #selected a{color:White;}
    #selected span{color:White;}
    .dark {color:#5b6984;}
    </style>
</head>
<body>
<div id="menu">
<ul>
<li ><a href="#">Обзор<br /><span class="dark">▲</span></a></li>
<li ><a href="#">Политика конфиденциальности<br /><span class="dark">▲</span></a></li>
<li id="selected"><a href="#">Условия использования<br /><span class="dark">▲</span></a></li>
<li><a href="#">Часто задаваемые вопросы<br /><span class="dark">▲</span></a></li>
</ul>

</div>
</body>
</html>

Upd.
Надо поработать с кроссбраузерностью этого меню. Или вместо цвета играй со свойством display:none / display:block

titan2012 · 13.02.2012, 02:54

вот смотри, здесь все без картинок
http://ruseller.com/lessons.php?rub=2&id=1088
или же
http://markup-javascript.com/2009/02...ya-navigaciya/

код подправь под свой

Naive · 13.02.2012, 08:23

для современных браузеров можно через псевдо-элементы сделать и transform, тогда треугольник получится 90 градусов как в примере.
Для ие 6-8 только картинками/svg

vanooo · 13.02.2012, 13:43

Огромное спасибо за помощь.Это меню из новой политики конфиденциальности гугла

для titanа2012) http://www.google.ru/intl/ru/policies/privacy/

vanooo · 13.02.2012, 13:48

Спасибо огромное за помощь,titan2012 это меню из новой политики конфиденциальности google http://www.google.ru/intl/ru/policies/privacy/

vanooo · 13.02.2012, 13:54

Тока что-то треугольник в файрфоксе не получился

vanooo · 13.02.2012, 15:29

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

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Труляля</title>
<style type="text/css">
	* {
  margin : 0;
  padding : 0;
}
#menu {
	background: #333;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height:46px;
	position:relative;
}
#menu li {
	float: left;
	
	margin: 0;
	padding: 0;
	font-size:14px;padding:5px 0 7px;
}
#menu a {
	background: #333 ;
	color: #fff;
	display: block;
	float: left;
	margin: 0;
	padding: 8px 19px;
	text-decoration: none;
	
}

#selected a{
color:White;
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
}
#dark {
color:#5b6984;
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
}
 #selected a{color:White;}
    #selected span{color:White;}
#menu a:hover {
	background: #333 url("images/hover.gif") bottom center no-repeat;
	color: #fff;
	padding-bottom: 16px; 
</style>
</head>
<body>

<ul id="menu">
	<li><a href="#" title="home">Главная</a></li>
	<li><a href="#" title="Products">Блог</a></li>
	<li><a href="#" title="Services">Вопрос</a></li>
	<li><a href="#" title="Support">Ляляля</a></li>
	<li><a href="#" title="FAQ">FAQ</a></li>
</ul>

</body>
</html>

Кстати вот сама стрелочка

12.02.2012, 19:58	#1
vanooo Пользователь Регистрация: 12.02.2012 Сообщений: 17	как сделать это меню Ребят подскажите как сделать такое меню (без картинок желательно,можете написать код css и html ). вот картинка ,по ней надо Помогите,плиз.

13.02.2012, 01:04	#4
_J_ Пользователь Регистрация: 02.12.2011 Сообщений: 13	Вот мой вариант твоего меню. В зависимости от выбранного пункта меню, меняется id пункта. По умолчанию треугольничек принимает цвет фона, если уменьшить высоту меню то можно увидеть этот треугольник)) Когда присваивается id="selected" шрифт становится белый и треугольник меняет цвет на белый. Значек в коде ▲ замени на: & # 9650; без пробелов Код: <!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> <title>Menu</title> <style type="text/css"> a{color:#d2d9eb; text-decoration:none;} ul {list-style:none;font-size:16px; } ul li {float:left;margin:10px 10px 0 0;padding:5px 5px 5px 5px; text-align:center;} #menu {background-color:#5b6984; color:white;height:51px; text-align:center;} #selected a{color:White;} #selected span{color:White;} .dark {color:#5b6984;} </style> </head> <body> <div id="menu"> <ul> <li ><a href="#">Обзор<br /><span class="dark">▲</span></a></li> <li ><a href="#">Политика конфиденциальности<br /><span class="dark">▲</span></a></li> <li id="selected"><a href="#">Условия использования<br /><span class="dark">▲</span></a></li> <li><a href="#">Часто задаваемые вопросы<br /><span class="dark">▲</span></a></li> </ul> </div> </body> </html> Upd. Надо поработать с кроссбраузерностью этого меню. Или вместо цвета играй со свойством display:none / display:block Последний раз редактировалось _J_; 13.02.2012 в 01:08. Причина: Update

13.02.2012, 08:23	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	для современных браузеров можно через псевдо-элементы сделать и transform, тогда треугольник получится 90 градусов как в примере. Для ие 6-8 только картинками/svg Alar, верни репу!

13.02.2012, 13:43	#7
vanooo Пользователь Регистрация: 12.02.2012 Сообщений: 17	Огромное спасибо за помощь.Это меню из новой политики конфиденциальности гугладля titanа2012) http://www.google.ru/intl/ru/policies/privacy/ Последний раз редактировалось vanooo; 13.02.2012 в 13:45.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Меню codrops (стильное меню), Как сделать чтобы текст не смещался в блоке?	AlienNation	HTML и CSS	2	28.09.2011 13:17
как это сделать?	salair	Помощь студентам	0	30.04.2011 19:40
Tabs-меню. Как это реализовано (ссылка на образец)?	akokin	HTML и CSS	3	14.10.2009 15:36
как это сделать?	DeDoK	Общие вопросы Delphi	2	11.07.2008 04:41

13.02.2012, 02:54	#5
titan2012 Пользователь Регистрация: 07.02.2012 Сообщений: 95	вот смотри, здесь все без картинок http://ruseller.com/lessons.php?rub=2&id=1088 или же http://markup-javascript.com/2009/02...ya-navigaciya/ код подправь под свой

13.02.2012, 13:48	#8
vanooo Пользователь Регистрация: 12.02.2012 Сообщений: 17	Спасибо огромное за помощь,titan2012 это меню из новой политики конфиденциальности google http://www.google.ru/intl/ru/policies/privacy/

13.02.2012, 13:54	#9
vanooo Пользователь Регистрация: 12.02.2012 Сообщений: 17	Тока что-то треугольник в файрфоксе не получился