Наш блог
Писания, обмена знаниями, Новости, Обучающие программы
Загрузка ...
Как кодекса Перекрытие вкладок главного меню
14 октября 2009 - По Sumeet
Главное меню навигации является то, что часть веб-дизайна, что делает весь сайт выглядит живым и полным. Но наиболее распространенный тип стиль меню навигации все еще используется много есть вкладки меню навигации. Вот учебник о том, как код перекрытия вкладок меню.
Существуют различные стили и методы создания вкладок меню навигации и одна из них с вкладками или наложение перекрывающихся стиль, в котором каждая вкладка, как представляется, лежащих над другими и, следовательно, дает все меню очень реалистичный вид. При проектировании мой сайт, я прошел через много вдохновения и учебные пособия. Один из них был этот учебник называется Photoshop Фактура бумаги на пустом месте, то Создать Grungy веб-дизайна с ним! Автор Коллис от NetTuts.com Это заканчивало тем, что главным вдохновением для моего сайта и в то время за учебником, я обнаружил, Коллис говорит, что:
"Теперь, если я действительно говорю так самостоятельно эти вкладки выглядят удивительными, и поэтому они делают это потому, что они перекрывают друг друга. К сожалению, это также делает их сложнее работать в формате HTML. Однако вы можете делать множество вещей с прозрачными PNG, или поочередно просто сделать цвет текста изменений опрокидывания и не беспокоиться об изменении вкладку цветов. Так или иначе все это несколько выходит за рамки этого руководства. Достаточно сказать, меню может быть немного сложнее построить. "
Так что я пытался писать ее в HTML и после того, как последующие мысли делиться своим опытом со всеми вами.
Шаг 1.Gearing Up
Так, прежде чем начать код такой вкладок навигации в HTML / CSS код, вы должны сначала узнать, как создать в Photoshop в первую очередь. Выше учебнике очень подробно и Коллис делает большую работу в обучении, как построить такое меню в фотошопе. Я построил один простой, специально для этого урока.
Теперь позвольте мне указать, что Есть три состояния tab.The неактивном состоянии сероватый цвет, активное состояние глубокого синего и состояние наведении легкий стальной синий цвет. Таким образом, вместо того, нарезка трех изображений для каждой вкладки, можно вырезать изображение спрайта.
Шаг 2. Нарезки вкладок из PSD
Совместите выступы вертикально с помощью сеток, как показано на рисунке выше. Вы также можете выровнять вкладки горизонтально, а не вертикально, а затем изображение CSS фон позиция будет доступен по-другому. Выбор зависит от человека к человеку, но оба работают отлично. Хотя обрезка изображения следовать указаниям должным образом, и обратите внимание, что я сделал фон прозрачным, потому что мы будем нуждающихся прозрачным фоном, если мы должны перекрываться вкладок. Кадрировать изображение и сохранить его для веб-PNG24 в формате. Еще один момент отметить, в то время как нарезка изображений является то, что первой вкладке есть "Home" закладка не должны иметь какой-либо тень на ее левый край в неактивном состоянии. Таким образом, для этой конкретной вкладке мы должны создать другой спрайт без теней в нем.
Шаг 3. Кодекс гостях
Теперь, когда наша нарезки, является полной и у нас есть все необходимые изображения, мы можем начать кодирование нашей навигационной панели. Просто, чтобы сделать пример хорошо выглядеть, я построил пример признакам содержания область макета с перекрывается панелью навигации. Вся схема выглядит следующим образом:
<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"> Портфолио </> </ LI> <li class="services"> <a href="services.html"> Услуги </ A> </ LI> <li class="about"> <a href="about.html"> О нас </> </ LI> <li class="contact"> <a href="contact.html"> Свяжитесь </ A> </ LI> </ UL> <div class="clear"> </ P> <div id="featured"> <div id="featured-content"> </ P> </ P> </ P> </ Body> </ HTML>
Давайте посмотрим на наш основной навигации по меню. Я использовал простой неупорядоченный список как и любая другая панель навигации и стиля ее, используя фоновое изображение Гиперссылка теги списка.
<ul id="main-nav"> <li class="current"> <a href="index.html"> Главная страница </ A> </ LI> <li class="portfolio"> <a href="portfolio.html"> Портфолио </> </ LI> <li class="services"> <a href="services.html"> Услуги </ A> </ LI> <li class="about"> <a href="about.html"> О нас </> </ 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-значения индекса, убедитесь, что положение атрибута для элемента списка установлено относительное. Без каких-либо позиционирование значение г-индекс собственности не будет работать вообще.
ул # главной навигационной 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 , как , меню , навигация , более внахлест
Об авторе
Sumeet является основателем код-приятель. Он работает как веб-разработчик, это хардкор-программист, трудоголик, веселый парень и любит свою семью. Следуйте за ним по щебетать и Facebook.
Вы можете следить за ответами к этой записи через RSS 2.0 подачи. Вы можете оставить отзыв или трекбек со своего сайта.
Доля знаний
Другие объявления Вы можете, как
47 Ответов
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-методы
Оставить комментарий
Просматривать
- "Выбрать" Проблема после использования jqTransform и его решение 71 комментарий (ев)
- Как кодекса Перекрытие вкладок главного меню 47 комментарий (ев)
- Интеграция Облако зум с WP электронной коммерции Золотая корзина Галерея 31 комментарий (ев)
- Шаблон Grunge 19 комментарий (ев)
- iPhone Application Template 19 комментарий (ев)
- Listify, конвертировать Сырье Text To HTML Элементы 17 комментарий (ев)
- Бизнес Шаблон 16 комментарий (ев)
-
$ ('Select.jqTransformHidden'). Жизни ("изменения", функция () {VAR thiz = $ (t. ..
-
Suppppppppppper учебника .... спасибо ...............
-
Привет, я использовал jqtransform плагин для создания регистрационной формы, И. ..
-
Здравствуйте, это то, что вы нашли решение для использования "OptionGroup "?...
Отличный учебник и хорошо написано. Спасибо за акцию.
Спасибо 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 и доступность большой нет-нет.
Добрый день,
Какая часть вы имеете в виду? У меня есть текущий класс страницы на элемент списка, а не ссылку элемента.
Я не могу сделать это: S
Не знаю, как
Не могли бы вы помочь мне
Он даже не беру ломтики из PNG24 в
Я не настолько хорошо с CSS и я действительно хочу этого перекрывается меню
Я использую только 2 изображения и дал тем же именем, как вы делали
но не работает
Мое изображение является немного ниже, но лил больше
Не могли бы вы мне помочь?
Можете ли вы сделать это для меня, пожалуйста?
Итак, теперь я делаю сайт вспышка
Но все-таки проблемы с навигацией
как я могу дать ему курсор + активная ссылка на фронте?
Эй, привет, Извините, у меня нет большого опыта работы с Flash. Но если следовать учебник правильно и чесотка Z-значения индекса должным образом тоже. Я не думаю, вы будете иметь никаких проблем ...
Wonerful! Мне нравится, как этот блог постоянно обновляется свежими content.I сделал три моих друзей подписаться кстати, лол
как вы скачать
это вечный цикл
Извините за причиненные неудобства. Но вы можете скачать его после нажатия на кнопку загрузки. Если вы не хотите, чтобы подписаться, просто закройте окно всплывал и загрузка начнется.
Обратная связь всегда приветствуется
Большое спасибо. Я собирался отказаться от кодирования навигации от оригинального учебника дизайна. Это мне очень помогли!
Рад, что я мог бы помочь Тома
Например хорошо работает, и это действительно превосходный вид.
Тем не менее, она не работает, а в IE6, как пинг-файл (. PNG)
поддержки не было. Кто-нибудь есть обходной путь для IE6, что
работы с этим примером?
Великий, я очень люблю этот вид меню, я добавил на мой сайт
http://www.ajaxshake.com
спасибо
Последний Лукаса блоге .. Псевдо 3D-эффект с чистым Css
Хэя. Высокий учебник. Я только что создал блог. Тем не менее при проектировании государства. Я очень хочу, чтобы использовать эту вещь.
Но я своего рода пристрастие к многоуровневым выпадающем меню. Можно ли изменить этот код? Так что многоуровневая выпадающем меню может быть достигнуто?
Спасибо и считает.
Последнее сообщение в блоге Феникса .. но опять же-ни было размещение
Да, вы легко можете изменить его, чтобы добавить несколько меню уровне. Посмотрите на любого мульти учебник уровень меню там. В принципе, элемент ли будет иметь ул элемент наряду с гиперссылкой. Ул элемент будет действовать как подменю (выпадающее меню)
Просто хотел, чтобы дать вам кричать из долины солнца, большой информацией. Высоко ценится.
Я просто сталкивался с этим из журнала Smashing. Спасибо за этот великий урок.
как вы думаете, это максимальное количество меню вкладки, которые я могу положить в верхней части моего сайта - я действительно хотел бы иметь 13 - это то, что для многих?
Suppppppppppper учебник .... Спасибо ... ... ... ...