Наш блог

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

  • Как веб-разработчик, то, что вам нравится кодирования больше всего?

    Loading ... Загрузка ...
Overlapping Tabs Tutorial Thumbnail

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

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

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

Эй Там!

Это будет большим, если бы Вы также можете подписаться на наш канал ...

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

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

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

Шаг вверх 1.Gearing

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

menu-image

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

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

tab-sprite

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

no-shadow-sprite

Шаг 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-индекса с вкладками, они не появляются в течение внахлест и будет выглядеть следующим образом:

non-overlapped-tabs

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

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

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

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

Метки: , , , ,

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

34 Ответы

  1. Отличный учебник и хорошо написано. Спасибо за акцию.

  2. Привет из России!
    Могу ли я привести пост в блоге с ссылкой на вас?

  3. хороший урок! .... очень полезно

  4. Я хочу, чтобы приложения для Apple Iphone и Ipod Touch. Все виды приложений, но я не знаю, как начать и с чего начать может кто-то из дайте мне помочь

  5. Мне интересно узнать, как программы для iPhone. Что бы язык Windows, которое наиболее близко напоминает iPhone языка программирования. Я хотел бы написать для машин Windows и Iphones без переучиваться всего язык программирования.

    ________________
    [URL = http://unlockiphone22.com/] разблокировать iphone [/ URL]

  6. Хотите знать, какие два веб-сайта, книги или другие вещи я должен использовать для разработки веб-сайта с Adobe Photoshop ... ... у Спасибо заранее .. Plz почты, если у меня может ..: D

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

  8. Я не могу сделать это: с
    Не знаю, как :-(

    Можете ли вы помочь мне
    Он даже не принять мою ломтики из png24 в

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

    Можете ли вы помочь мне?

    Можете ли вы сделать это для меня, пожалуйста?

  9. Итак, сейчас я делаю сайт на Flash

    Но все-таки проблемы с навигацией
    Как я могу дать ему мышку + активная ссылка на фронте?

    • Эй, привет, извините, у меня нет большого опыта работы с Flash. Но если следовать учебнике правильно и чесотки г Значения индекса правильно тоже. Не думаю, что вы будете иметь никаких проблем ... :)

  10. Wonerful! Мне нравится, как этот блог постоянно обновляется и пополняется свежей content.I сделал три моих друзей подписаться кстати, LOL

  11. деревенщина

    как вы скачать

    это вечный цикл

    • Приносим извинения за доставленные неудобства. Но вы можете скачать его после нажатия на кнопку "Загрузить". Если вы не хотите, чтобы подписаться, просто закрыть всплывающее окно и загрузка начнется.

      Обратная связь всегда приветствовал :)

  12. Спасибо вам большое. Я хотел было отказаться от кодирования навигации с оригинальным дизайном учебник. Это мне очень помогли!

Trackbacks и Pingbacks

  1. kopfkribbeln дизайн-блог »Überlappendes Tabmenü
  2. 45 Мощный CSS / JavaScript-методы - Smashing Magazine
  3. 45 Мощный CSS / JavaScript-методы «Социально-Пресс
  4. 45 Мощный CSS / JavaScript-методы | TipTe.com
  5. 45 Мощный CSS / JavaScript-методы | Tutorial51
  6. 45 Мощный CSS / JavaScript-Techniques »Shai Perednik.com
  7. 45 Мощный CSS / JavaScript-методы | moreInet.com | Webdesign, Графический дизайн службы в Паттайе
  8. Перекрытие вкладок | Веб-дизайн два
  9. 45种有用的CSS / JavaScript技巧| нарко
  10. CSSFind
  11. 45 Мощный CSS / JavaScript-методы | DX блог
  12. designfloat.com
  13. zabox.net
  14. joyoge.com

Написать ответ

CommentLuv Enabled
  • Графический реки WpWebHost Хостинг Are My Сайты Up? Тема лесных
  • Просматривать

  • Облако тегов