Не могу разобраться с навигацией

[karim1717]

Здравствуйте, уважаемые форумчане.

Есть задача: сверстать горизонтальную навигацию.

По умолчанию ссылки показываются просто текстом, с этим я справился. А при наведении на их фоне появляется квадрат с закругленными углами.

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

Не подскажете как реализовать?

[ShumNo]

На активной странице к ссылке, которая соответствует этой странице приписывается класс, обычно этот класс приписывает система (cms) но полагаю можно реализовать и на js

[karim1717]

Уже неплохо, хоть какая-то инфа. Буду копать JS значит.

А вообще, планирую на Drupal посадить.

[ShumNo]

если планируете использовать drupal то там это работает из "коробки" с возможностью настраивать более детально используя доп модули

[karim1717]

Разобрался

[ShumNo]

как по мне, то верстка избыточна + это не навигация друпала, если планируете его использовать

[karim1717]

В каком плане избыточна? Можете указать на недочеты?

Я сперва планирую сверстать просто html+css, а потом уже пробовать натягивать на друпал.

[ShumNo]

я не профи верстальщик и моем мнение бывает неверное, но

• за чем нужен <nav> при условии что все это обернуто в div
  
• за чем нужен <span>
  
• в навигации достаточно использовать 1 картинку - градиент в 1 пиксель все остальное css там же их 3 + в коде тегом <img> когда ее в css выносить надо
  
• кнопка должна реагировать на всю кнопку, а не только на текст
  
• если навигация однородна, то в разметке можно не проставлять класс к каждому элементу
  

вот это на вскидку

И все таки посмотрите структуру разметки генерируемой друпалом по умолчанию, потом будет проще создавать шаблон

Edited November 27, 2011 by ShumNo

[hedgehog]

В шаблоне по умолчанию используются ul списки, что подходит для большинства случаев. Но по необходимости можно изменить шаблон почти чего угодно, любого отдельного меню, блока и так далее

[Noodles]

Цвета и шрифт поставишь нужные, к активному элементу добавляется класс .menu-item-active

http://jsfiddle.net/tgprA/1/

html:

	<ul>
		<li class="menu-item"><a class="menu-item-link" href="#">Главная</a></li>
		<li class="menu-item"><a class="menu-item-link" href="#">Труверы</a></li>
		<li class="menu-item"><a class="menu-item-link" href="#">Помощь</a></li>
		<li class="menu-item menu-item-active"><a class="menu-item-link" href="#">Очень длинная ссылка</a></li>
	</ul>

css:

		.menu-item {
			float: left;
			margin: 0 8px;
			padding: 4px 8px;
			list-style: none;
		}
		.menu-item:hover {
			border: 1px #ccc solid;
			border-radius: 4px 4px 0 0;
			margin: 0 7px;
			background-image: linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
			background-image: -o-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
			background-image: -moz-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
			background-image: -webkit-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
			background-image: -ms-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);			
		}
		.menu-item-active {
			border: 1px #ccc solid;
			border-radius: 4px 4px 0 0;
			margin: 0 7px;
			background-image: linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
			background-image: -o-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
			background-image: -moz-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
			background-image: -webkit-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
			background-image: -ms-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
		}
		.menu-item-link {
			font: 12px Tahoma;
			color: #39414d;
			text-decoration: none			
		}

Edited November 28, 2011 by Noodles

[karim1717]

Класс, спасибо большое

[ShumNo]

Но я бы в зависимости от аудитории сайта подумал бы использовать ли градиенты css и проверил видно ли навигацию (если убрать фон градиента) в старых браузерах (если с помощью их заходит достаточно большая аудитория)

[karim1717]

На старые браузеры планирую ставить заглушку.

Мол у тебя старый браузер, скачай новый. Если уж мои посетители настолько ТУПЫ, что юзают до сих пор ИЕ6, то пусть лучше вообще не заходят на сайт)

[Noodles]

Пользователи старых браузеров увидят белые, бездушные прямоугольники выделенные серой рамкой.

В большинстве случаев приемлимым вариантом является корректное предоставление контента, пользователям старых браузеров. Я считаю это очень справедливо по отношению и к большинству которые в 2011 хотят пользоваться технологиями современными, а не теми которые были доступны 10 лет назад.