Наш блог

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

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

    Посмотреть результаты

    Loading ... Загрузка ...
Опубликовать Блог Image

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

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

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

Live Demo Скачать

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

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

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

Шаг 1.Gearing Up

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

menu-image

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

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

tab-sprite

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

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" /> <ссылке HREF =" CSS / styles.css "Rel =" стиль "Type =" текст / CSS "/> </ head> <div <body> id="page-wrap"> <ul id="main-nav"> <LI классу" текущие "> <a href="index.html"> Главная страница </ A> </ LI> <li class="portfolio"> <a href="portfolio.html"> Портфолио </ A> </ LI> < Li класс = "Услуги"> <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 = "признакам"> <div id="featured-content"> </ div> </ div> </ div> </ body> </ 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>

 улица # основные Li-Nav (
	 Float: слева;
	 Должность: относительное;
	 Дисплей: встроенный;
 )

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

 улица # основные Li-Nav (
	 Должность: относительное;
	 ширина: 110px;
	 Высота: 29px;
	 Дисплей: блок;
	 BACKGROUND-IMAGE: URL ('../ Images / tabs.png ');
	 Справочная информация: Должность: Центр-центр;
	 COLOR: # 44403b;
	 TEXT-DECORATION: нет;
	 Размер шрифта: 14px;
	 FONT-SIZE: 12px;
	 Текст-ALIGN: слева;
	 PADDING-LEFT: 30px;
	 FONT-WEIGHT: Bold;
 )
 # основные улицы-Nav li.home (
	 BACKGROUND-IMAGE: URL ('../ Images / TAB-home.png ');
 )
 # основные улицы-Nav li.current (
	 Справочная информация: Должность: сверху;
	 COLOR: # FFFFFF;
 )
 улица # основные Li-Nav: Hover (
	 Справочная информация: Должность: дно;
	 COLOR: # FFFFFF;
 )
 # основные улицы-Nav li.current: Hover (
	 Справочная информация: Должность: Top / * Для предотвращения текущей вкладки с изменением цвета на наведении * /
	 COLOR: # FFFFFF;
 )

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

 # основные улицы-Nav li.current (
	 Z-INDEX: 100;
 )
 # основные улицы-Nav li.home (
	 Z-INDEX: 100;
 )
 # основные улицы-Nav li.portfolio (
	 Z-INDEX: 99;
 )
 # основные улицы-Nav li.services (
	 Z-INDEX: 98;
 )
 # основные улицы-Nav li.about (
	 Z-INDEX: 97;
 )
 # основные улицы-Nav li.contact (
	 Z-INDEX: 96;
 )

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

non-overlapped-tabs

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

 # основные улицы-Nav (
	 MARGIN-налево: 20px;
 )
 улица # основные Li-Nav (
	 Float: слева;
	 Должность: относительное;
	 MARGIN-налево:-20px;
	 Дисплей: встроенный;
 )

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

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

Метки:

Этот вступление быть столб на Среда, 14 октября 2009 в 1:09 вечера и подается под блог, Обучение. Вы можете последовать за всеми реакциями к этому входу через RSS 2.0 питание. Вы можете оставить ответ, или Архив с вашего собственного сайта .

Ответ

  1. FAQPAL

    17 октября

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

    [Ответ]

    Sumeet Чавла ответ:
    17 октября 2009 в 10:01 утра

    Спасибо Pliggs .. Это была большая честь пост учебник на FaqPal слишком :)

    [Ответ]

  2. Polprav

    17 октября

    Привет из России!
    Можно процитировать сообщение в блоге со ссылкой на вас?

    [Ответ]

    Sumeet Чавла ответ:
    18 октября 2009 в 12:21 утра

    Эй Привет из Индии! :) Вы хотите процитировать сообщение из блога, как в? Цитировать конкретном предложении фразу или что? :)

    [Ответ]

  3. Ракеш

    20 октября

    Nice урок! .... очень полезно

    [Ответ]

  4. knoli

    25 октября

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

    [Ответ]

  5. kopfkribbeln дизайн-блог »Überlappendes Tabmenü

    29 октября

    [...] Lässt. Eine Sehr häufiger Искусство дер Сайт-DAS IST Навигация Tab навигатор-MENU. Hier IST Эйн Учебник Wie человека Эйн überlappendes Tabmenü [...]

  6. knoli

    21 ноября

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

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

    [Ответ]

    Sumeet Чавла ответ:
    21 ноября 2009 года в 7:42 утра

    Ну, если вы войдете во вкус и на языке C, то вы можете кода на любом языке программирования. С подобной матерью всех Языки программирования.

    [Ответ]

  7. Сантош Pingale

    22 декабря

    2 Хотите знать, какие веб-сайта, книги или другие вещи я должен использовать для дизайна веб-сайта из Adobe Photoshop ... ... Спасибо заранее U .. PLZ напишите мне, если U Can ..: 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/

    Вы должны обладать основами навыки использования Photoshop. В конце концов, что в действительности вопросов является уровень творчества у вас есть. :)

    [Ответ]

  8. 45 Мощная CSS / JavaScript-Techniques - Smashing Magazine

    13 января

    [...] Треугольники все написанное CSS. Вы можете легко изменять цвета в CSS файл и использовать его для free.How Кодексу Перекрытие вкладками MenuMain Главное меню навигации, что является частью веб-сайта, дизайна, что делает весь сайт Живу и [...]

  9. 45 Мощная CSS / JavaScript-методы «Социально-Пресс

    13 января

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

  10. 45 Мощная CSS / JavaScript-Techniques | TipTe.com

    14 января

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

  11. 45 Мощная CSS / JavaScript-Techniques | Tutorial51

    14 января

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

  12. LeGars

    14 января

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

    [Ответ]

    Sumeet Чавла ответ:
    14 января 2010 в 3:13 вечера

    Здравствуйте,
    Часть которых вы говорите? Я имею текущем классе страницу на элементе списка, а не ссылки элемента.

    [Ответ]

  13. Дин

    26 января

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

    Можете Вы мне помочь
    Он даже не принимает мои ломтиками из png24's

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

    Можете ли вы пожалуйста помочь мне?

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

    [Ответ]

  14. Дин

    30 января

    Ладно, теперь я делаю сайт на Flash

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

    [Ответ]

    Sumeet Чавла ответ:
    8 февраля 2010 в 10:39 утра

    Эй привет, прости, я не имеют большого опыта работы с Flash. Но если вы следуете Учебник правильно и Манга Z-значений индекса слишком правильной. Я не думаю, что вы будете есть какие-то проблемы ... :)

    [Ответ]

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




Вы можете использовать стандартные XHTML теги



CommentLuv Enabled