Кіраўніцтва крок за крокам
Калі ваша навігацыйнае меню ўяўляе сабой гарызантальны шэраг у верхняй або вертыкальную радку ўніз боку, гэта ўсё ж такі проста спіс. Пры распрацоўцы вэб-навігацыі, часта лёгка забыцца пра тое, што навігацыйнае меню проста праславіў групу спасылак. Але калі вы программируете ў навігацыі з дапамогай XHTML + CSS, вы можаце стварыць меню, якое мала, каб загрузіць (XHTML) і лёгка наладзіць (КСС).
Пачатак
Для таго, каб прыступіць да распрацоўкі спісу для навігацыі, вы павінны выкарыстоўваць спіс.
Гэта можа быць стандартны неўпарадкаваных спіс, які быў ідэнтыфікаваны як рух:
<Нав>
- прадукты
- паслугі
- Кантакты
Калі вы ўважліва паглядзіце на HTML, вы заўважыце, што «Home» спасылка таксама мае ідэнтыфікатар youarehere. Гэта дазволіць стварыць меню, якое ідэнтыфікуе бягучае месцазнаходжанне для вашых чытачоў. Нават калі вы не плануеце мець гэты тып візуальнага сігналу на вашым сайце прама зараз, вы можаце ўключыць гэтую інфармацыю. Калі вы вырашылі дадаць біток пазней, вы будзеце мець менш кадаваньне для падрыхтоўкі вашага сайта.
Без якога - небудзь CSS стылю , гэта меню XHTML выглядае як стандартны неўпарадкаваных спіс. Ёсць кулі і складнікі спісаў злёгку водступу. Паколькі я выкарыстоўваю запаўняльнікі спасылку , большасць браўзэраў не будуць адлюстроўваць спасылкі як Clickable (падкрэслена і сіні). Калі ўставіць у прыведзеным вышэй HTML ў вэб-старонкі, ваша рух будзе выглядаць наступным чынам:
- дома
- прадукты
- паслугі
- Звяжыцеся з намі
Гэта даволі сумнае і не выглядае гэтак жа, як у меню. Але толькі некалькі стыляў CSS дададзены ў спіс, вы можаце стварыць меню, якое прымушае вас ганарыцца.
Вертыкальнае меню навігацыі
Вертыкальная рух па меню вельмі лёгка пісаць, паколькі ён адлюстроўвае такім жа чынам, як звычайны спіс: уверх і ўніз.
Складнікі спісаў адлюстровываюцца вертыкальна ўніз старонкі.
Калі я меню стылю, я хацеў бы пачаць з вонкавага боку і працаваць у Расіі. Пад гэтым я маю на ўвазе, што я першы стыль па улям # навігацыі, а затым перайсці да элементаў LI, а затым спасылках і г.д. Так што для гэтага меню, спачатку вызначыць шырыню меню. Гэта гарантуе, што нават калі гэтыя пункты меню доўга, яны не будуць штурхаць астатнюю частку макета больш або выклікаць гарызантальную прагортку.
уль # навігацыі {шырыня: 12em; }
Пасля таго, як я атрымаў мноства шырыні, я магу гуляць з элементамі спісу. Гэта дазваляе мне ўсталяваць такія рэчы, як (каб пазбавіцца ад куль), колеру фону, мяжы, выраўноўванне тэксту і палі.
уль # навігацыі Лі {
спіс-стыль: не;
колер фону: # 039;
мяжы зверху: цвёрды 1px # 039;
выраўноўвання тэксту: злева;
Маржа: 0;
}Пасля таго, як вы ўсталявалі асновы для элементаў спісу вы можаце пачаць гуляць з тым, як меню выглядае ў галіне сувязяў. Першы стыль па UL # навігацыі LI А і затым A: спасылка, A: наведаных A: парыць, і A: актыўны (калі вы хочаце іх). Для спасылкі, я хацеў бы зрабіць спасылкі на блок-элемент (а не па змаўчанні ў лініі). Гэта прымушае іх займаць усю прастору LI -І яны дзейнічаюць больш як пункт, што робіць іх больш зручнымі ў стылі, як меню buttons.The іншыя рэчы я заўсёды раблю гэта не выдаліць падкрэсліванне (тэкст-аздабленне: няма;), як гэта робіць кнопкі выглядаюць як кнопкі для мяне.
Але, вядома, ваша канструкцыя можа быць рознай.
уль # навігацыі Лі а {
Дысплей: блок;
тэкст-аздабленне: няма;
абіўка: .25em;
мяжа дно: цвёрды 1px # 39f;
мяжы справа: цвёрды 1px # 39f;
}Звярніце ўвагу на тое, што з дысплеем: блок; ўсталяваць па спасылках, увесь скрыню пункта меню з'яўляецца інтэрактыўнай, а не толькі літарай. Гэта таксама добра для зручнасці выкарыстання. Пераканайцеся ў тым , каб усталяваць на спасылку колеру (спасылку, наведаных, парыць і актыўны) , калі вы хочаце, каб адрознівацца ад сіняга па змаўчанні, чырвоны і фіялетавы.
а: спасылка, а: наведаў {колер: #fff; }
а: завісаць, а: актыўны {колер: # 000; }Я таксама хацеў бы даць дзяржаве Hover трохі больш увагі, змяняючы колер фону.
а: завісаць {колер фону: #fff; }
Калі вы хочаце больш прыкладаў слаба меню, застаецца толькі пазнаёміцца са спісам ніжэй.
- Меню, стылізацыі па вертыкалі
- Шаблон меню Basic Вертыкаль
- Стылезаванага Вертыкальнае меню з вамі тут
- Базавы вертыкальнае меню Шаблон з вамі тут
Гарызантальнае меню навігацыі
Стварэнне гарызантальнага меню навігацыі, крыху больш складана, чым вертыкальнае меню навігацыі, таму што ў вас ёсць, каб кампенсаваць той факт, што спісы HTML аддаюць перавагу адлюстроўваць вертыкальна. Як і ў гарызантальным меню, неабходна спачатку стварыць свой спіс меню навігацыі :
<Нав>
- прадукты
- паслугі
- Кантакты
Каб стварыць гарызантальнае меню, працуе так жа, як вы рабілі з вертыкальным меню. Пачніце з вонкавага боку і працаваць. Так як я хачу, каб мая рух, каб пачаць у левым куце, я паставіў яго з 0 левае поле і водступы, і плаваю яго налева. Вы таксама павінны атрымаць у звычцы налады шырыні так, каб ваша меню не займае больш ці менш месцаў, чым вы збіраецеся. Для гарызантальнага меню, звычайна гэта поўная шырыня канструкцыі. Я таксама дадаў колер фону на ўвесь спіс , каб зрабіць яго больш зручным для чытання.
уль # рух {
плаваць: злева;
Маржа: 0;
абіўка: 0;
шырыня: 100%;
колер фону: # 039;
}Але сакрэт меню навігацыі ў гарызантальных элементах спісу. Складнікі спісаў, як правіла, блакаваць элементы, што азначае, што яны будуць мець сімвал новага радка змяшчаецца да і пасля кожнага з іх. Пры пераключэнні дысплея ад блока да инлайн, вы прымусіце складнікі спісаў выбудоўвацца побач адзін з адным па гарызанталі.
уль # рух Li {дысплей: убудаваны; }
Я лячыла спасылкі гэтак жа, як я ставіўся да іх у навігацыйным меню вертыкальнай, з таго ж колеру і афармлення тэксту. Я дадаў верхнюю мяжу, каб акрэсліць кнопкі, калі яны луналі над. Адзінае, што я выдаліў быў дысплей: блок; як гэта паставіць новыя радкі назад і знішчыць гарызантальнае меню.
уль # навігацыі Лі а {
тэкст-аздабленне: няма;
абіўка: .25em 1em;
мяжа дно: цвёрды 1px # 39f;
мяжы зверху: цвёрды 1px # 39f;
мяжы справа: цвёрды 1px # 39f;
}
а: спасылка, а: наведаў {колер: #fff; }
уль # навігацыі Лі а: завісаць {
колер фону: #fff;
колер: # 000;
}Вы тут Інфармацыя пра размяшчэнне
Іншы аспект HTML з'яўляецца youarehere ідэнтыфікатарам. Калі вы хочаце змяніць сваё меню, каб паказаць бягучае месцазнаходжанне карыстальнікаў, проста выкарыстоўвайце гэты ідэнтыфікатар, каб вызначыць колер фону або іншы стыль. Перамясціць гэты атрыбут ID для правільнага пункта меню на іншых старонках, так што бягучая старонка заўсёды выдзелена.
уль # навігацыйны Лі # youarehere а {колер фону: # 09F; }
Калі змясціць гэтыя стылі разам на вашай старонцы, вы можаце стварыць гарызантальную або вертыкальную радок меню, якое працуе з вашым сайтам, але гэта хутка загрузіць і вельмі лёгка абнаўляць ў будучыні. Выкарыстанне XHTML + CSS ператварае спісы ў вельмі магутны інструмент для праектавання.
Калі вы хочаце больш прыкладаў гарызантальнага меню, звярніцеся наступным.
- Стылезаванага Гарызантальнае меню
- Шаблон меню Basic гарызантальны
- Стылезаванага Гарызантальнае меню з вамі тут
- Базавы Гарызантальнае меню Шаблон з вамі тут
<Літый ID = "youarehere"> Галоўная
<Літый ID = "youarehere"> Галоўная