Наш блог
Писания, обмен знаниями, Новости, Обучающие
Загрузка ...
Как кодировать Перекрытие вкладок главного меню
14 октября 2009 - По Sumeet
Главное меню навигации является то, что часть веб-дизайна, что делает весь сайт выглядит живой и полной. Но самый распространенный тип стиль меню навигации до сих пор используется много есть вкладки меню. Вот учебник о том, как кодировать перекрытия вкладок меню.
Существуют различные стили и методы создания вкладок навигации по меню и одна из них с вкладками или наложение перекрывающихся стиль, в котором каждая вкладка будет лежать над другой и, следовательно, дает все меню очень реалистичный вид. При разработке своего сайта, я прошел много вдохновения и руководства. Один из них был этот учебник называется Photoshop бумаги текстуру с нуля, то создать Grungy веб-дизайна с ним! Автор Коллис от NetTuts.com Это заканчивало тем, что главным вдохновением для моего сайта и в то время за учебником я нашел Коллис говорит, что:
"Теперь, если я сделаю так сказать себе эти вкладки выглядят удивительными, и поэтому они делают это потому, что они перекрывают друг друга. К сожалению, это также делает их сложнее работать в формате HTML. Однако вы можете делать множество вещей с прозрачными PNG, или попеременно просто сделать цвет текста изменений опрокидывания и не беспокоиться об изменении цвета вкладки. Так или иначе все это несколько выходит за рамки этого руководства. Достаточно сказать, меню может быть немного сложнее построить. "
Поэтому я старался писать ее в HTML, а когда я думал о последующих делиться своим опытом со всеми вами.
Шаг 1.Gearing вверх
Поэтому, прежде чем начать кодировать такую вкладок навигации в HTML / CSS код, вы должны сначала узнать, как создать в Photoshop в первую очередь. Выше учебнике очень подробно и Коллис делает большую работу по обучению, как создать такое меню в фотошопе. Я построил одну простую специально для этого урока.
Теперь позвольте мне указать, что существуют три состояния tab.The неактивном состоянии сероватый цвет, активное состояние глубокого синего и государства при наведении светло стали синего цвета. Таким образом, вместо того, нарезка трех изображений для каждой вкладки, можно вырезать изображения спрайта.
Шаг 2. Нарезки вкладок из 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" /> </ HEAD> <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> </ 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>
ул # главной навигационной ли { float: left; позиция: относительная; Дисплей: встроенный; }
Помните, что мы используем изображение спрайта для вкладок, в которых самый верхний вкладка представляет активное состояние, средний представляет неактивном состоянии, а нижняя представляет собой состояние при наведении курсора. Таким образом, мы будем использовать свойство 'фона позиции "правильно поместить изображения в их состояние следующим образом:
ул # главной навигационной ли { позиция: относительная; ширина: 110px; высота: 29px; Дисплей: блок; фонового изображения: URL ('/ изображения / tabs.png. ».); фон положение: центр центр; цвет: # 44403b; текст-отделка: нет; Размер шрифта: 14px; обивка-топ: 12px; Текст-align: left; заполнение левой: 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 слева от него, добавив негативный "маржа налево" имущество "ул # главной навигационной ли и нажмите целом панель навигации неупорядоченный список влево добавить положительных 20px "маржа налево", чтобы свести на нет левого движения подопечные бар.
ул # главной навигационной {маржа налево: 20px;} # ул главной навигационной ли {float: left; позиция: относительная, маржа налево:-20px; дисплей: встроенный;} Миссия выполнена
После сборки все CSS и XHTML вместе, у нас будет перекрывающийся вкладках главного меню навигации готов к использованию. Это была моя взять на себя, как создать такое меню, и я уверен, что есть много более эффективных способов сделать то же самое. Я был бы рад, если вы могли бы поделиться любой другой способ сделать это, или просто обсудить некоторые улучшения в этой самой процедуры.
Вот несколько сайтов, которые используют более притирки вкладок в качестве основного навигационного меню:
ILove2Design.at
HiddenDepth.ie
HotCards.com
Теги: CSS , как , меню , навигация , более внахлест
Об авторе
Sumeet является основателем код-приятель. Он работает как веб-разработчика, является хардкор-программист, трудоголик, веселый парень и любит свою семью. Следуйте за ним на Twitter и Facebook.
Вы можете следить за ответами к этой записи через RSS 2.0 подачи. Вы можете оставить отзыв или трекбек со своего сайта.
Поделитесь знаниями
Другие сообщения Вы можете, как
48 Ответов
Trackbacks и Pingbacks
- kopfkribbeln веб-дизайн-блог »Überlappendes Tabmenü
- 45 Мощный CSS / JavaScript-методы - Smashing Magazine
- 45 Мощный CSS / JavaScript-методы «Социально-Пресс
- 45 Мощный CSS / JavaScript-методы | TipTe.com
- 45 Мощный CSS / JavaScript-методы | Tutorial51
- 45 Мощный CSS / JavaScript-методы »Шай Perednik.com
- 45 Мощный CSS / JavaScript-методы | moreInet.com | Веб-дизайн, графический дизайн службы в Паттайе
- Перекрытие вкладок | Веб-дизайн два
- 45种有用的CSS / JavaScript技巧| нарко
- CSSFind
- 45 Мощный CSS / JavaScript-методы | DX блог
- designfloat.com
- zabox.net
- joyoge.com
- 100 великих меню CSS Учебники
- 50 лучших CSS Menu учебники с Jquery эффект | Desua мир знаний
- 100 великих меню CSS Tutorials - pocongseXy :: Искусство и Dezign ::
- 100 великих меню CSS Учебники | Дизайнер Малайзии
- E-sitesweb »45 Мощный CSS / JavaScript-методы
- 100 великих меню CSS Уроки ~ ~ ~ на SUYASH - HearTThrobeHearTThrobe
Оставить комментарий
Просматривать
- 'Select' проблемы после использования jqTransform и ее решения 78 комментарий (ев)
- Как кодировать Перекрытие вкладок главного меню 48 комментарий (ев)
- Шаблон iPhone приложение 34 комментарий (ев)
- Интеграция Облако зум с WP электронной коммерции Золотая корзина Галерея 32 комментарий (ев)
- Шаблон Grunge 23 комментарий (ев)
- Spice Up Your Twitter Feed Display Box с помощью CSS 18 комментарий (ев)
- Бизнес Шаблон 17 комментарий (ев)
-
Est се дие уоиз Авез фактом Аппель а.е. Feuille де стиль? ...
-
Здравствуйте, это то, что вы нашли решение для использования "OptionGroup" ...?
-
У меня есть другие проблемы с jqtransform, свиток в выберите Optio ...
-
Ну, вы можете включить HTML участие в нижней части страницы блоггер ...
-
эй действительно AWESOM наведении играть с Twitter, но я хочу некоторую помощь, я хочу ...
Отличный урок, и хорошо написано. Спасибо за акцию.
Спасибо Pliggs .. Это была большая честь разместить учебник на FaqPal слишком
Привет из России!
Могу процитировать сообщение в своем блоге со ссылкой на вас?
Привет Привет из Индии!
Вы хотите, чтобы процитировать сообщение из блога как? Приведу конкретный приговор, фразу или что? 
хороший урок! .... очень полезно
Я хочу, чтобы приложения для Iphone и Apple, Ipod Touch. Все виды приложений, но я не знаю, с чего начать и с чего начать может кто-нибудь дать мне некоторую помощь
Я заинтересован в том, как программировать для iPhone. Что было бы языке для Windows, которое наиболее близко напоминает iPhone языка программирования. Я хотел бы написать для машин Windows, и Iphones без переучиваться всю язык программирования.
________________
[Url = http://unlockiphone22.com/] разблокировка iphone [/ url]
хорошо, если вы получаете вид на языке C, то вы можете написать на любом языке программирования. С, как матери всех языков программирования.
Хотите знать, какие 2 сайта, книги или другие вещи, я должен использовать для разработки веб-сайта с Adobe Photoshop ...... Спасибо и до .. плз напишите мне, если и можно ..: D
хорошо, лучший ресурс для обучения проектированию является Интернет. Он обновляется каждую минуту с последними тенденциями и учебники.
Вот некоторые ссылки, чтобы вы начали с
http://vandelaydesign.com/blog/design/website-layout-photoshop-tutorials/
http://creativenerds.co.uk/tutorials/70-tutorials-using-photoshop-to-design-a-website/
Вы должны иметь основные навыки использования Photoshop. В конце концов, что на самом деле важно, уровень креативности у вас есть.
Привет, я могу только сказать, что хотя это и интересное меню, вы не должны иметь текущую вкладку страницы в виде ссылки. Это UX и доступность большой нет-нет.
Здравствуйте,
Какую часть вы имеете в виду? У меня есть текущий класс страницы на элемент списка, а не ссылку элемента.
Я не могу сделать это: с
Не знаю, как
Можете ли вы помочь мне
Он даже не беру кусочки из PNG24 в
Я не так хорошо с CSS и я действительно хочу это перекрывающихся меню
Я использую только 2 изображения и дал тем же именем, как вы делали
но не работает
Мое изображение является немного ниже, но лил больше
Не могли бы вы мне помочь?
Можете ли вы сделать это за меня, пожалуйста?
Итак, теперь я делаю сайт вспышка
Но до сих пор проблемы с навигацией
Как я могу дать ему мыши + активная ссылка на фронте?
Эй, привет, Извините, у меня нет большого опыта работы с Flash. Но если вы будете следовать учебник правильно и чесотки Z-значения индекса правильно тоже. Я не думаю, вы будете иметь никаких проблем ...
Wonerful! Мне нравится, как этот блог постоянно обновляется свежими content.I сделал три моих друзей подписаться Кстати, LOL
Как вы скачать
это вечный цикл
Извините за причиненные неудобства. Но вы можете скачать его после нажатия на кнопку загрузки. Если вы не хотите подписаться, просто закройте окно всплывающее и загрузка начнется.
Обратная связь всегда приветствуется
Большое спасибо. Я собирался отказаться от кодирования навигации от оригинального учебника дизайна. Это мне очень помогло!
Рад, что я мог бы помочь Тома
Например хорошо работает, и это действительно превосходный вид.
Тем не менее, она не работает, а в IE6, как пинг файл (. PNG)
поддержки не было. Кто-нибудь есть обходной путь для IE6, что
Работы в этом примере?
Большой, мне очень нравится такое меню, я добавил на мой сайт
http://www.ajaxshake.com
спасибо
Последний Лукаса блоге .. Псевдо 3D-эффект с чистым Css
Хэя. Удивительный урок. Я только что созданный блог. Тем не менее при проектировании государства. Я действительно хочу, чтобы использовать эту вещь.
Но я своего рода пристрастие к многоуровневой выпадающих меню. Можно ли изменить этот код? Так что многоуровневая выпадающем меню может быть достигнуто?
Спасибо и привет.
Последний Феникса блоге .. но опять же-ни было размещение
Да, вы можете легко изменить его, чтобы добавить несколько меню уровне. Посмотрите на любой учебник нескольких уровень меню там. В принципе, элемент ли будет иметь ул элемент наряду с гиперссылкой. Ул элемент будет выступать в качестве подменю (выпадающее меню)
Просто хотел, чтобы дать вам крик из долины солнца, большой объем информации. Очень высокую оценку.
Я наткнулся на это от Smashing Magazine. Спасибо за этот великий урок.
Что вы думаете максимальное количество меню вкладки, которые я могу поставить в верхней части моего сайта - я бы очень хотел, чтобы 13 - это то, что много?
Suppppppppppper урок .... спасибо ............