Как кодекса Перекрытие вкладок Главная

Наш блог

Работы, обмена знаниями, новости, справочники

Как веб-разработчик, то, что вам нравится кодирования больше всего?
- XHTML
- PHP
- CSS
- Javascript (включая библиотеки, такие как JQuery, Му средства и т.п.)
- Другой
Посмотреть результаты
Загрузка ...

Как кодекса Перекрытие вкладок Главное Меню

14 октября 2009 - По Sumeet

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

Live демо- Скачать

Существуют различные стили и методы создания вкладок навигации по меню и один из них с вкладками или наложение перекрытых стиль, в котором каждая вкладка будет лежать по сравнению с другими и, следовательно, предоставить все меню очень реалистичный вид. При разработке своего сайта, я прошел через много вдохновения и руководства. Один из них был этот учебник называется Photoshop текстуру бумаги с нуля затем Создать шероховатый веб-дизайна с ним! Автор Коллис от NetTuts.com Это итоге является основным вдохновением для моего сайта, и, проходя учебнике я нашел Коллис говорит, что:

"Теперь, если я говорю, и сам так эти вкладки смотреть огромная, и поэтому они делают это потому, что они совпадают. К сожалению, это также делает их труднее работать с в HTML. Однако, Вы можете делать множество вещей с прозрачными PNG, или попеременно просто сделать текст изменять цвета в опрокидывания и не беспокоиться об изменении цвета вкладки. Во всяком случае все это несколько выходит за рамки этого руководства. Достаточно сказать, меню может быть немного сложно построить. "

Так что я попытался кодирования 1 в HTML, а когда я последующие мысли делиться своим опытом с вами.

Шаг вверх 1.Gearing

Поэтому, прежде чем начать код такой вкладками навигации в HTML / CSS код, вы должны сначала узнать, как создать в Photoshop в первую очередь. Данное руководство очень подробное и Коллис делает большую работу в обучении, как создать такое меню в фотошопе. Я построил один простой 1, специально для этого учебника.

Теперь позвольте мне указать, что Есть три состояния tab.The неактивном состоянии сероватый цвет, активном состоянии, синий и наведении государства легкие стальные синего цвета. Таким образом, чем нарезка три изображения для каждой вкладки, можно часть из изображений спрайтов.

Шаг 2. Slicing вкладки из PSD

Совместите выступы вертикально использованием сетки, как показано на рисунке выше. Вы также можете привести вкладок по горизонтали, а не вертикально, а затем изображение CSS фоне позиции будут обращаться по-другому. Выбор зависит от человека к человеку, но и работает отлично. Хотя обрезка изображений следовать указаниям должным образом и обратите внимание, что я сделал фон прозрачным, потому что мы понадобятся прозрачный фон, если нам нужно перекрывать вкладок. Обрезать изображение и сохранить его для веб-сайтов в формате PNG24. Еще один момент отметить, в то время как нарезка изображения является то, что первая закладка т.е. на вкладке "Главная" не следует, имеющие любую тень на ее левом краю в неактивном состоянии. Таким образом, для данной вкладке мы должны создать еще один спрайт без тени.

Шаг 3. Кодекс Away

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

 <! 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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
 <link href="css/styles.css" rel="stylesheet" type="text/css" />
 </> Голову

 <body>
	 <div id="page-wrap">
		 <ul id="main-nav">
			 <li class="current"> <a href="index.html"> Главная страница </ A> </ LI>
			 <li class="portfolio"> <a href="portfolio.html"> Портфель </ A> </ LI>
			 <li class="services"> <a href="services.html"> услуги </ A> </ LI>
			 <li class="about"> <a href="about.html"> О компании </ A> </ LI>
			 <li class="contact"> <a href="contact.html"> контакт </ A> </ LI>
		 </ UL>
		 <div class="clear"> </> Div
		 <div id="featured">
			 <div id="featured-content">
			 </> Div
		 </> Div
	 </> Div
 </> Тела

 </ HTML>

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

 <ul id="main-nav">
	 <li class="current"> <a href="index.html"> Главная страница </ A> </ LI>
	 <li class="portfolio"> <a href="portfolio.html"> Портфель </ A> </ LI>
	 <li class="services"> <a href="services.html"> услуги </ A> </ LI>
	 <li class="about"> <a href="about.html"> О компании </ A> </ LI>
	 <li class="contact"> <a href="contact.html"> контакт </ A> </ LI>
 </ UL>

 улица # главной навигационной Ли (
	 плавать: слева;
	 должность: родственника;
	 дисплей: встроенный;
 )

Помните, что мы используем изображение спрайта для вкладок, в которых самый верхний вкладка представляет собой активное состояние, является средним неактивном состоянии и представляет собой дно наведении государства. Таким образом, мы будем использовать "фон положение имущественных правильно поместить изображения в их заявить следующее:

 улица # главной навигационной Ли (
	 должность: родственника;
	 ширина: 110px;
	 высота: 29px;
	 дисплей: блок;
	 фонового изображения: URL изображения ('../ / tabs.png ');
	 фон положение: центр-центр;
	 цвет: # 44403b;
	 текст-отделка: нет;
	 размер шрифта: 14px;
	 обивка-топ: 12px;
	 выравнивания текста: слева;
	 обивка налево: 30px;
	 начертание шрифта: жирный;
 )
 улица # главной навигационной li.home (
	 фонового изображения: URL изображения ('../ вкладке-home.png ');
 )
 улица # главной навигационной li.current (
	 фон позиции: сверху;
	 цвета: # FFFFFF;
 )
 улица # главной навигационной Ли: наведите (
	 фон положение: дно;
	 цвета: # FFFFFF;
 )
 улица # главной навигационной li.current: наведите (
	 фон позиции: верхняя / *, чтобы предотвратить текущий закладку от изменения цвета на наведении * /
	 цвета: # FFFFFF;
 )

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

 улица # главной навигационной li.current (
	 г-индекс: 100;
 )
 улица # главной навигационной li.home (
	 г-индекс: 100;
 )
 улица # главной навигационной li.portfolio (
	 г-индекс: 99;
 )
 улица # главной навигационной li.services (
	 г-индекс: 98;
 )
 улица # главной навигационной li.about (
	 г-индекс: 97;
 )
 улица # главной навигационной li.contact (
	 г-индекс: 96;
 )

Даже если мы присвоены различные значения Z-индекса с вкладками, они не появляются в течение внахлест и будет выглядеть следующим образом:

Чтобы дать штрихи к нашей навигационной панели, нужно нажать каждой вкладки в верхней части других. Мы назначили г-значения индекса в убывающем порядке слева направо. Таким образом, мы просто нажать каждую вкладку начиная с права около 20px слева от него, добавив негативного "левый край" собственности в "улица # главной навигационной Li 'и нажмите целом навигационной панели неупорядоченный список влево на добавить положительных 20px 'маржи-налево "свести на нет левого движения отделениях бар.

 улица # главной навигационной (
	 маржа налево: 20px;
 )
 улица # главной навигационной Ли (
	 плавать: слева;
	 должность: родственника;
	 маржа налево:-20px;
	 дисплей: встроенный;
 )

Миссия выполнена

После сборки всех CSS и XHTML вместе, у нас будет перекрываться вкладок меню навигации готов к использованию. Это был мой взять на себя, как создать такое меню, и я уверен Есть много более эффективных способов делать то же самое. Я был бы рад если бы вы могли поделиться любой другой способ сделать это или просто обсудить некоторые улучшения этой самой процедуры.
Вот какой-либо сайт, которые используют более доводочные вкладок в качестве основного навигационного меню:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Метки: CSS , как , меню , навигация , над внахлест

Другие сообщения возможно, вы захотите

34 Ответы

FAQPAL
17 октября 2009 года в 3:18 утра
Отличный учебник и хорошо написано. Спасибо за акцию.
Ответ
- Sumeet Чавла
  17 октября 2009 в 10:01 утра
  Спасибо Pliggs .. Это была большая честь для размещения учебнике по FaqPal слишком
Polprav
17 октября 2009 года в 8:54 вечера
Привет из России!
Могу ли я привести пост в блоге с ссылкой на вас?
Ответ
- Sumeet Чавла
  18 октября 2009 в 12:21 утра
  Привет Привет из Индии! Вы хотите процитировать пост из блога, как в? цитатой частности предложение, фраза, что ли?
Rakesh
20 октября 2009 года в 12:55 утра
хороший урок! .... очень полезно
Ответ
knoli
25 октября 2009 в 5:45 вечера
Я хочу, чтобы приложения для Apple Iphone и Ipod Touch. Все виды приложений, но я не знаю, как начать и с чего начать может кто-то из дайте мне помочь
Ответ
knoli
21 ноября 2009 в 3:49 утра
Мне интересно узнать, как программы для iPhone. Что бы язык Windows, которое наиболее близко напоминает iPhone языка программирования. Я хотел бы написать для машин Windows и Iphones без переучиваться всего язык программирования.
________________
[URL = http://unlockiphone22.com/] разблокировать iphone [/ URL]
Ответ
- Sumeet Чавла
  21 ноября 2009 года в 7:42 утра
  хорошо, если вы получите повесить на языке С, то вы можете код на любом языке программирования. C, как мать всех Языки программирования.
Santosh Pingale
22 декабря 2009 в 2:18 вечера
Хотите знать, какие два веб-сайта, книги или другие вещи я должен использовать для разработки веб-сайта с Adobe Photoshop ... ... у Спасибо заранее .. Plz почты, если у меня может ..: D
Ответ
- Sumeet Чавла
  23 декабря 2009 года в 11:28 утра
  Ну, самый лучший ресурс для изучения проектирования интернет. Он обновляется каждую минуту с последними тенденциями и учебники.
  Вот некоторые ссылки, чтобы вы начали с
  http://vandelaydesign.com/blog/design/website-layout-photoshop-tutorials/
  http://creativenerds.co.uk/tutorials/70-tutorials-using-photoshop-to-design-a-website/
  Вы должны иметь основы навыков использования фотомонтажа. В конце концов, что в действительности значение имеет уровень креативности у вас есть.
LeGars
14 января 2010 года в 3:07 вечера
Привет, я могу только сказать, что хотя это интересное меню, вы не должны на текущей странице вкладку качестве связующего звена. Это UX и доступности большой нет-нет.
Ответ
- Sumeet Чавла
  14 января 2010 года в 3:13 вечера
  Здравствуйте,
  Какая часть вы имеете в виду? Я имею текущей страницы класса на элемент списка, а не ссылку элемента.
Декан
26 января 2010 года в 4:13 утра
Я не могу сделать это: с
Не знаю, как
Можете ли вы помочь мне
Он даже не принять мою ломтики из png24 в
Я не настолько хорошо с CSS, и я действительно хочу этого перекрываются меню
Я использую только два изображения и дал то же имя, ты
, но не работает
Мой образ немного ниже, но лил больше
Можете ли вы помочь мне?
Можете ли вы сделать это для меня, пожалуйста?
Ответ
Декан
30 января 2010 года в 2:12 утра
Итак, сейчас я делаю сайт на Flash
Но все-таки проблемы с навигацией
Как я могу дать ему мышку + активная ссылка на фронте?
Ответ
- Sumeet Чавла
  8 февраля 2010 в 10:39 утра
  Эй, привет, извините, у меня нет большого опыта работы с Flash. Но если следовать учебнике правильно и чесотки г Значения индекса правильно тоже. Не думаю, что вы будете иметь никаких проблем ...
Morishita
25 марта 2010 в 12:55 вечера
Wonerful! Мне нравится, как этот блог постоянно обновляется и пополняется свежей content.I сделал три моих друзей подписаться кстати, LOL
Ответ
деревенщина
3 июня 2010 в 5:44 вечера
как вы скачать
это вечный цикл
Ответ
- Sumeet
  3 июня 2010 года в 11:54 вечера
  Приносим извинения за доставленные неудобства. Но вы можете скачать его после нажатия на кнопку "Загрузить". Если вы не хотите, чтобы подписаться, просто закрыть всплывающее окно и загрузка начнется.
  Обратная связь всегда приветствовал
Том Крисчен
12 июня 2010 года в 5:47 утра
Спасибо вам большое. Я хотел было отказаться от кодирования навигации с оригинальным дизайном учебник. Это мне очень помогли!
Ответ
- Sumeet
  12 июня 2010 года в 9:57 утра
  Рад, что я мог бы помочь Том