Menu li( float:left; )

Все наше меню стало горизонтальним.

Якщо ви не зрозуміли, що саме трапилося і що робить властивість float, рекомендую погуглити інформацію про дану властивість і добре вивчити її, оскільки
без нього не обходиться жодна сторінка верстки, це я вам точно говорю. Ну та гаразд продовжуємо!

Menu li а( display:block;/* Робимо посилання блоковим елементом*/ padding:12px 20px;/* Задаємо внутрішнє відступи */ text-decoration: none; /* прибираємо нижнє підкреслення */ color:#fff;/* робимо колір посилання білим */ background:#444;/* робимо колір фону темним */ font:14px Verdana, sans-serif;/* задаємо розмір та назву шрифту */ )

Тут одне з найважливіших правил - display: block;. Справа в тому, що за умовчанням посилання є малими елементами, а до малих елементів відступи в різних браузерах застосовуються по-різному, тому бажано зробити посилання блоковим елементом і тільки тоді застосовувати до неї властивості пов'язані із зовнішнім або внутрішнім відступами. Зараз не хочеться навантажувати вас зайвою інформацією з часом на реальних прикладах ви самі зрозумієте, навіщо тут робиться такий акцент.

Давайте подивимося, що у нас вийшло, оновлюємо сторінку браузера і тадам!:

Як бачите, виглядає непогано, можна сказати, що в принципі наше меню готове. Єдине, що потрібно ще зробити - це задати світло посилань при наведенні, ну ще як мені здається меню краще виглядатиме з роздільниками між пунктами.

Почнемо з роздільників:

Menu li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )

Що ми тут зробили? Та все дуже просто ми поставили для наших пунктів (

Знову дивимося, що в нас вийшло:

На мою думку з роздільниками набагато краще.

Menu li a:hover( background:#888; )

Знову використовуючи спеціальний псевдоклас, цього разу - hover, ми задаємо колір посилання при наведенні на неї курсору, дивимося:

На мою крутяк 🙂, сподіваюся у вас вийшло таке ж меню як у мене.

На цьому закінчуватиму цей урок, дуже сподіваюся, що він вам був корисний і тепер ви знаєте, як верстати просте горизонтальне меню на чистому html і css. Звичайно, ми згорнули однорівневе меню, трохи складніше буде з дворівневим міну (з вкладеним списком), але це вже тема для іншого уроку, на цьому у мене все. Заходьте ще, буду радий!

Доброго часу доби всім, хто зараз читає цю публікацію. Сьогодні я хочу розповісти вам про один із інструментів сайтобудування, без якого жоден веб-ресурс не може обійтися. Це меню сайту, або як ще кажуть карта сайту. На сьогоднішній день існує безліч видів і підвидів меню.

Розробники інтернет-магазинів, блогів, навчальних сервісів та інших ресурсів експериментують та створюють все новіші та незвичайні карти. Після прочитання статті ви дізнаєтеся, на які основні групи діляться всі види навігаційних панелей, зможете випробувати кожну з них, а також навчитися писати код меню для сайту html. А тепер перейдемо безпосередньо до справи!

У мові розмітки є кілька способів створення меню. Основна їхня концепція полягає у використанні ненумерованого списку. Таким чином, у звичному для нас html 4 розробники прописують на станиці теги

і
• .

  Як зазначалося в попередніх публікаціях, парний елемент

  створює маркований список, а
  • один елемент списку. Для наочності давайте напишемо код простого меню:

    Навігація

    Навігація сайту

    • Головна
    • Новини тижня
    • Технологічні досягнення
    • Чат

    Однак з появою платформи мова розмітки поповнилася додатковими тегами. Саме тому меню сучасних веб-сайтів створюється за допомогою спеціального тега.< menu>. Цей елемент нічим не відрізняється від маркованих списків.

    Замість одиниці< ul>прописується< menu>. Однак суттєві відмінності з'являються, якщо судити з боку роботи. Так, другий приклад прискорює роботу пошукових програм та роботів в . При аналізі структури сайту вони відразу розуміють, що цей шмат коду відповідає за карту сайту.

    Бувають горизонтальні, вертикальні та випадаючі меню. Іноді навігаційну панель оформляють у вигляді зображення. Оскільки сегмент технологій розширився, веб-сервіси роблять адаптивними, тобто. структура сторінок автоматично адаптується під розмір екрана девайсів. Розглянемо перелічені групи меню.

    Створимо горизонтальну навігаційну модель

    Такий вид навігації найпопулярніший. При горизонтальному оформленні панелі всі пункти меню розташовані в шапці сторінки або в підвалі (іноді навігаційні елементи дублюються, відображаючись одночасно і зверху, і знизу).

    Як приклад, ми створимо горизонтальну панель, пункти меню якого будуть оформлені за допомогою css (каскадних таблиць стилів), а точніше трансформовані. Так, кожен окремий елемент буде у скошеному прямокутнику. Заінтригував?

    Для трансформації ми використовуємо властивість css під назвою transform. Щоб вказати трансформацію, використовується вбудована функція skewX, в якій кут нахилу вказується в градусах.

    На жаль, кожен браузер працює з цією властивістю по-своєму, незважаючи на прописані стандарти. Тому для позначення того чи були створені спеціальні префікси:

    • -ms- (Internet Explorer)
    • -o- (Opera)
    • -webkit- (Chrome, Safari)
    • -moz- (Firefox)

    А тепер отримані знання можна застосувати до написання прикладу.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

    Горизонтальна панель Головна Про компанію Продукція Контакти

    Горизонтальна панель li ( display: inline-block; margin-right: 6px; background: #FF8C00; transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); ) a ( display: block; padding: 18px 35px; transform: skewX(40deg); -o-transform: skewX(40deg); -ms-transform: skewX(40deg); -moz-transform: skewX(40deg);

  • Головна
  • Про компанію
  • Продукція
  • Контакти
  А тепер вертикально. Я сказав вертикально!

  Для другої програми використовуємо за основу попередній код. Я захотів, щоб пункти мого вертикального меню були не скошені, а із заокругленими кутами.
  

  Для цього я скористався ще однією властивістю css border-radius.

  У попередніх статтях я вже працював із цим параметром, тож складнощів з розумінням його функціонування, думаю, не виникне.

  Вертикальна панель li( display: block; margin: 13px; padding: 13px; background: #FF8C00; width:20%; text-align:center; font-size:20px; border-radius:10px; ) a ( color: # fff; ) li:hover ( background: #1C1C1C; )

  • Головна
  • Про компанію
  • Продукція
  • Контакти

  Як ви вже помітили, головна зміна в цьому коді – відсутність оголошення display: inline-block , який власне і відповідав за горизонтальне розташування пунктів навігації.

  Підпункти в меню: список, що випадає

  Ми з вами розглянули основні групи навігаційних панелей, проте існує ще кілька різновидів або краще сказати доповнення.

  

  Іноді виникають такі ситуації, коли деякі пункти доповнюють основні. У цьому випадку не обійтися без списків, що випадають. Вони створюються шляхом перетворень інструментами CSS.

  Нижче я прикріпив код маленької програми, в якій реалізується цей підхід.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

  Випадаючий список body ( padding-left: 30%; font-size: 18px; ) .m-menu ( margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background : #FF8C00; ) .m-menu > li ( position: relative; display: inline-block; ) .m-menu a ( display: block; margin-left: -2px; padding: 13px; -Left: 3px solid #fff; ) .m-menu a:hover ( background: #1C1C1C; ) .m-menu .s-menu ( left: 10px; 0; padding: 0; list-style: none; background: #FF8C00; ) .m-menu. Головна Продукція Цукерки Торти Печиво Контакти

  Випадаючий список body ( padding-left: 30%; font-size: 18px; ) .m-menu ( margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background : #FF8C00; ) .m-menu > li ( position: relative; display: inline-block; ) .m-menu a ( display: block; margin-left: -2px; padding: 13px; -Left: 3px solid #fff; ) .m-menu a:hover ( background: #1C1C1C; ) .m-menu .s-menu ( left: 10px; 0; padding: 0; list-style: none; background: #FF8C00; ).m-menu : block; )

  • Головна
  • Продукція
    • Цукерки
    • Торти
    • Печиво
  • Контакти

  Більшість класичних сайтів в інтернеті використовують горизонтальне меню як основний елемент навігації. Іноді можуть зустрічатися різні додаткові фішки — багаторівневі конструкції, іконки для підпунктів, блок пошуку, складні списки тощо. Нещодавно в блозі вже була невелика добірка, а сьогодні розглянемо 4 практичні приклади як зробити меню на CSS + HTML. Інформація стане в нагоді початківцям розробникам і тим, хто хоче змінити навігацію на своєму сайті.

  Перший туторіал CSS3 Dropdown Menu – найновіший у добірці (за квітень 2016). Плюси рішення: в даному горизонтальному меню, що випадає, для сайту в підпунктах є іконки, реалізація і сам CSS код досить прості для розуміння і впровадження.

  Крок1 - HTML розмітка

  Насамперед створюємо невпорядкований список HTML з якірними посиланнями (#) для його елементів. Туди ж до одного з пунктів додаємо ще один вкладений список, який відповідатиме за підменю.

  My dashboard Likes Views Documents Messages Sign Out Uploads Videos Documents

  • My dashboard
  • Likes
  • Views
    • Documents
    • Messages
    • Sign Out
  • Uploads
  • Videos
  • Documents

  Крок2 — Відображення меню

  Видаляємо зайві відступи в CSS для елементів горизонтального меню сайту. На цьому етапі встановимо фіксовану ширину і висоту пунктів меню, а також додамо закруглені кути.

  .menu, .menu ul, .menu li, .menu a ( margin : 0 ; padding : 0 ; border : none ; outline : none ; ) .menu ( height : 40px ; width : 505px ; background : #4c4e -webkit-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ;background : -moz-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; (top , #4c4e5a 0% , #2c2d33 100% ) ; background : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; -webkit-border-radius: 5px ;-moz-border-radius: 5px ; border-radius : 5px ; ) .menu li ( position : relative ; block ; height : 40px ; )

  Menu, .menu ul, .menu li, .menu a ( margin: 0; padding: 0; Border: none; outline: none; ) .menu ( height: 40px; webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);background: -o-linear-gradient( top, #4c4e5a 0%, #2c2d33 100%), background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%); background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; height: 40px;

  Крок3 - оформлення посилань

  Крім базових фішок у стилях (шрифт, колір, висота) використовуємо та створюємо плавний перехід кольору тексту при наведенні. Також додаємо в меню роздільники, прибираючи кордон у першого елемента зліва та у останнього праворуч.

  .menu li a ( display : block ; padding : 0 14px ; margin : 6px 0 ; line-height : 28px ; text-decoration : none ; border-left : 1px solid #393942 ; border-right 5 : 1p -family : Helvetica, Arial, sans-serif ; font-weight : білий , font-size : 13px ; color : #f3f3f3 ; transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -out, transition: color .2s ease-in-out; ) : hover > a ( color : #8fde62 ; )

  Menu li a ( display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; Border-left: 1px solid #393942; family: Helvetica, Arial, sans-serif; font-weight: білий; font-size: 13px; color: #f3f3f3; : color .2s ease-in-out;-moz-transition: color .2s ease-in-out;-o-transition: color .2s ease-in-out; : .menu li:first-child a ( border-left: none; ) .menu li:last-child a( border-right: none; ) .menu li: hover > a ( color: #8fde62; )

  Крок4 - підміню

  Оскільки у нас меню сайту на CSS випадає, слід задати також оформлення вкладеному списку. Спочатку ставимо відступ 40px зверху і 0px зліва + додамо заокруглені кути. Для показу/приховання підменю спочатку встановлюємо властивість прозорості (opacity) рівну нулю, а при наведенні одиниці. Для створення ефекту появи підменю вказуємо значення висоти списку нуль, а при hover = 36px.

  .menu ul ( position : absolute ; top : 40px ; left : 0 ; opacity : 0 ; background : #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5 -radius : 0 0 5px 5px ;-webkit-transition: opacity .25s ease .1s ; .25s ease .1s ; transition : opacity .25s ease .1s ; ) .menu li : hover > ul ( opacity : 1 ; ) .menu ul li ( height : 0 ; overflow : hidden ; : height .25s ease .1s ;-moz-transition: height .25s ease .1s ; -o-transition: height .25s ease .1s ; .1s ; ) .menu li: hover > ul li ( height : 36px ; overflow : visible ; padding : 0 ; )

  Menu ul ( position: absolute; top: 40px; left: 0; opacity: 0; background: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- radius: 0 0 5px 5px;-webkit-transition: opacity .25s ease .1s; 25s ease .1s; transition: opacity .25s ease .1s; ) .menu li:hover > ul ( opacity: 1; ) .menu ul li ( height: 0; overflow: hidden; padding: 0; height .25s ease .1s;-moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; 1s; ) .menu li:hover > ul li ( height: 36px; overflow: visible; padding: 0; )

  Ширину посилань ставимо = 100px, внизу всіх елементів крім останнього додається межа border-bottom. Також, за бажанням, ви можете розмістити картинки для пунктів підменю (увага! не забудьте змінити шляхи до зображень у коді на використовувані вами).

  .menu ul li a ( width : 100px ; padding : 4px 0 4px 40px ; margin : 0 ; border : none ; border-bottom : 1px solid #353539 ; ) .menu ul li: .menu a.documents ( background : url (../img/docs.png ) no-repeat 6px center ; ) .menu a.messages ( background : url (../img/bubble.png ) no-repeat 6px center ; ) .menu a.signout ( background : url (../img/arrow.png ) no-repeat 6px center ; )

  Menu ul li a ( width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539; ) .menu ul li:last-child a ( border: none; ) . menu a.documents ( background: url(../img/docs.png) no-repeat 6px center; ) .menu a.messages ( background: url(../img/bubble.png) no-repeat 6px center; ) .menu a.signout ( background: url(../img/arrow.png) no-repeat 6px center; )

  Мені особисто подобається простота реалізації та використання іконок. Ось підсумковий код з codepen:

  

  Варіант від Josh Riser візуально схожий на попереднє меню на HTML і CSS. У коді немає дочірнього селектора ">" (корисний у багаторівневих конструкціях), але автор вдало використовує ефекти CSS3 (transition, box-shadow та text-shadow) для більш гарного результату. За посиланням у джерелі відсутній опис процесу створення горизонтального меню, тому я відразу наведу підсумковий код:

  

  У цьому прикладі ми розглянемо як зробити випадаюче меню на CSS, в якому крім пунктів буде блок пошуку. Подібну реалізацію часто можна зустріти у сучасних. За часом впровадження та складності рішення є трохи складнішим за попередні. Воно опубліковано у травні 2013, тому, можливо, деякі речі вам доведеться підправити, хоча при нашому тестуванні все добре працювало.

  HTML код

  Для навігації, як завжди, використовується список неупорядкований (з класом nav). Звичайні пункти меню є елементами списку (li) та містять посилання (a href) без будь-яких класів та ID. Винятком є ​​3 спеціалізовані елементи даного горизонтального меню, що випадає з такими ID:

  • settings - посилання картинка;
  • search - блок з пошуком та відповідною кнопкою;
  • options містить підменю (реалізовано через список з класом subnav).

  Також у коді побачите скрипт prefixfree для використання властивостей CSS без префіксів. Підсумковий варіант HTML для меню, що випадає, має вигляд:

  Application Board Options Settings Application Board Options

  • 
  • Application
  • Board
  • Options
    • Settings
    • Application
    • Board
    • Options

  CSS для меню

  1. Базові стилі та елементи меню

  По-перше, вказуємо шрифт Montserrat, темне сірий фон та фіксовану висоту для пунктів меню. Всі елементи мають вирівнювання float: left та позиціонування relative щоб потім можна було додати підменю з position: absolute;

  @import url (http://fonts.googleapis .com/css?family= Montserrat) ; * ( margin : 0 ; padding : 0 ; ) .nav ( background : # 232323 ; height : 60px ; display : inline - block ; ) . )

  @import url(http://fonts.googleapis.com/css?family=Montserrat); * ( margin: 0; padding: 0; ) .nav ( background: #232323; height: 60px; display: inline-block; ) .nav li ( float: left; list-style-type: none; )

  2. Оформлення посилань

  Для пунктів меню застосовується базове оформлення +. Висота така сама як і в класі nav. Для #settings посилання-картинки на початку меню задається вирівнювання.

  .nav li a ( font-size : 16px ; color : white ; display : block ; line-height : 60px ; padding : 0 26px ; text-decoration : none ; border-left : 1px solid #2e2e2ly ; font-faser , sans-serif ; text-shadow : 0 0 1px rgba (255 , 255 , 255 , 0.5 ) ; ) .nav li a: hover ( background-color : #2e2e2e ; ) ; font-size : 10px ; line-height : 24px ; )

  Nav li a ( font-size: 16px; колір: білий; displej: блок; line-height: 60px; padding: 0 26px; text-decoration: none; sans-serif;text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); ) . font-size: 10px, line-height: 24px;

  3. Блок пошуку

  Цей елемент має фіксовану ширину і складається з кількох частин - поля введення (#search_text) із зеленим тлом та кнопки пошуку (#search_button). У деяких браузерах колір фону може бути сірим.

  #search (width:357px; margin:4px;) #search_text(width:297px; padding:15px 0 15px 20px; font-size:16px; font-family: Montserrat, margin-right : 0 ; color : white ; outline : none ; background : #1f7f5c ; float : left ; box-sizing : border-box ; WebKit browsers */ color : white ; ) : -moz-placeholder ( /* Mozilla Firefox 4 to 18 */ color : white ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ color : white ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color : white ; ) #search_text : focus ( background : rgb (64 , 151 , 119 ) ; ) #search_button ( border : 0 none ; (search.png ) no-repeat center, width: 60px, float: left, padding: 0; text-align: center;

  #search (width: 357px; margin: 4px; ) #search_text( width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none margin-right: 0; color: white; outline: none; background: #1f7f5c; float: left; box-sizing: border-box; WebKit browsers */ color: white; ) :-moz-placeholder ( /* Mozilla Firefox 4 to 18 */ color: white; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ color: white; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color: white; ) #search_text:focus ( background: rgb(64, 151, 119); ) #search_button ( border: 0 none; background: #1f7f5c url (search.png) no-repeat center, width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer;

  4. Випадаюче підменю

  Фінальний штрих дозволить нам як зробити меню, що випадає на CSS, яке спрацьовує для останнього пункту #options.

  #options a( border-left : 0 none ; ) #options > a ( background-image : url (triangle.png ) ; background-position : 85% center ; background-repeat : no-repeat ; padding-right : 42px ; ) .subnav ( visibility : hidden ; position : absolute ; top : 110% ; right : 0 ; width : 200px ; height : auto ; opacity : 0 ; transition : all 0.1s ; : none ; ) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options : hover .subnav ( visibility : visible ; top : 100% ; opacity : 1 ; )

  #options a( border-left: 0 none; ) #options>a ( background-image: url(triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ). subnav ( visibility: hidden; position: absolute; top: 110%; right: 0; width: 200px; height: auto; opacity: 0; transition: all 0.1s; background: #232323; ) .subnav li ( ) : none; ) .subnav li a ( border-bottom: 1px solid #2e2e2e; ) #options:hover .subnav ( visibility: visible; top: 100%; opacity: 1; )

  У стилях знайдіть вставку фонового зображення трикутника (triangle.png) для позначення підменю – не забудьте вказати правильний шлях для цієї та інших картинок у прикладі. Появою підменю реалізується з допомогою якості opacity. Підсумкове рішення на codepen:

  

  У даному варіанті в основному використовуються прийоми CSS2.1, рішення плюс-мінус нове - за березень 2015. Якщо вам не вистачає одного підрівня в горизонтальному меню для сайту, то цей приклад містить відразу три. За допомогою псевдокласу: only-child для пунктів додається символ "+", що позначає наявність підменю.

  Загалом непоганий і нескладний приклад. Не детально описуватимемо процес реалізації, т.к. він схожий на попередні - спочатку створюєте HTML каркас, а потім поступово додаєте йому стилі. Підсумковий код завантажуйте за посиланням на джерело, частково його можна глянути в Codepen:

  Разом

  Вище ми розглянули 4 варіанти як зробити випадаюче меню на CSS + HTML для , хоча подібних прикладів у мережі набагато більше. Є рішення з jQuery, але це, швидше за все, стане в нагоді тільки для реалізації якихось спеціальних ефектів та нестандартних завдань. Найчастіше вистачить зв'язки CSS + HTML, тим паче, що сьогодні основні вимоги до меню — це зручність і швидка швидкість завантаження.

  Насамкінець два зауваження за кодами вище. У деяких прикладах для випадаючого меню CSS використовуються зображення, тому вам доведеться уважно переглянути шляхи до картинок і вказати правильні значення для свого сайту. По-друге, частина рішень 2х-3х літньої давності, тому слід ще раз додатково перевіряти їхню працездатність у різних браузерах.

  Якщо знаєте ще якісь цікаві сучасні реалізації горизонтальних меню для сайту, надсилайте посилання в коментарях.

  Створимо просте горизонтальне меню навігації для сайту. Для цього користуватимемося простими прийомами, які в результаті дадуть коректне відображення нашого меню у всіх браузерах.

  Тож почнемо. Створимо список із назвами нашого меню. Як назви пунктів нехай будуть такі: "Головна", "Новини", "Продукція", "Послуги", "Партнери", "Контакти". Створюємо новий файл під назвою menu.html, наприклад, за допомогою програми Dreamweawer або використовуючи звичайний блокнот. У ньому між тегами body розміщуємо наше меню. Це звичайний маркований список ul з елементами li. Вочевидь, кожен пункт меню робимо посиланням, де замість URL вставляємо решітку #. Використовуючи програму Photoshop створимо зображення розміром 3х30 px, з градієнтною заливкою, як показано на малюнку нижче. Файл збережемо у форматі GIF. Назвемо його bg.gif. Даний малюнок буде виступати як фонове зображення нашого меню.

  Ось вміст файлу menu.html:

  Просте кросбраузерне горизонтальне меню

  • Головна
  • Новини
  • Продукція
  • Послуги
  • Партнери
  • Контакти

  Тепер окремо створимо файл стилів під назвою main.css. Його лістинг наведено повністю нижче.

  Ul ( margin:0; /*обнулюємо відступи*/ padding:0; /*обнулюємо відступи*/ float:left; /*вирівнюємо список по лівому краю*/ width:auto;/*задаємо ширину авто виходячи з типу та вмісту списку */ background-image: url(bg.gif);/*встановлюємо фонове зображення*/ background-repeat:repeat-x; background-color:#4778c3; /*задаємо колір фону під зображення*/ font-size:13px; ( float:left; /*вирівнюємо елементи списку по лівому краю*/ ) ul a ( display:block; /*представляємо посилання меню як блокові елементи*/ width:100px; /*задаємо розмір блоку*/ height:30px; /* і висоту блоку*/ text-align:center;/*напис по центру*/ line-height: 2.1em;/*міжрядковий інтервал*/ text-decoration:none; /*колір тексту посилань - білий*/ border-right:#fff solid 1px; /*посилання змінює колір при наведенні покажчика*/ )

  Думаю, що з вмісту файлу main.css питань виникнути не повинно, підказки в коментарях я написав досить докладно і зрозуміло, тому не повторюватимуся. Не забуваємо його підключити до нашої сторінки menu.html за допомогою

  Підведемо підсумок. В результаті ми отримали повністю кроссбраузерне горизонтальне меню, яке виглядає однаково не тільки у всіх сучасних браузерах, а й у таких раритетах, як IE 5.5 та IE 6.0. Всі елементи меню представлені як блокові елементи і мають однакові розміри шириною 100 px і висотою 30px. Як роздільник пунктів меню використовується оформлення блокового елемента за допомогою правого бордера білого кольору завтовшки 1px. Це практично найпростіший спосіб реалізації горизонтального меню. Зрозуміло, за бажання його можна модифікувати, зробити більш красивим та функціональним використовуючи фантазію, властивості css та додаткові графічні елементи. Ну а наше горизонтальне меню виглядає приблизно так:

  Плюси цього рішення:
  Простота виконання
  Простий код
  Немає жодних таблиць та javascript
  Кросбраузерність: меню у всіх браузерах виглядає однаково
  Використовуються лише один малюнок
  Мінімум коду на сторінці menu.html
  Мінімум коду для реалізації стилів у main.css

  Файли, що використовуються в цьому прикладі, можна завантажити в архіві