Задаволены

• Крок
• Частка 1 з 2: Напісанне HTML
• Частка 2 з 2: Напісанне CSS
• Парады

З дапамогай выпадальнага меню вы ствараеце выразны і іерархічны агляд усіх важных частак на старонцы і падраздзелаў, якія змяшчае старонка. Вам проста трэба правесці курсор мышы па галоўных раздзелах, каб з'явіліся падраздзелы. Вы можаце стварыць выпадальнае меню, выкарыстоўваючы толькі HTML і CSS.

Крок

Частка 1 з 2: Напісанне HTML

1. Стварыце свой раздзел навігацыі. Звычайна вы выкарыстоўваеце nav> для панэлі навігацыі па ўсім сайце, загаловак> для меншых раздзелаў спасылак, якія прывязаны да старонкі, альбо div>, калі, здаецца, не падыходзіць іншая опцыя. Змесціце гэта ў элемент div>, каб вы маглі наладзіць стыль кантэйнера і самога меню.
   • div>
   • nav>
   • / nav>
   • / div>
2. Дайце кожнаму раздзелу атрыбут класа. Пазней мы будзем выкарыстоўваць атрыбут class, каб змяніць стыль гэтых элементаў з дапамогай CSS. Дайце і кантэйнеру, і меню ўласны атрыбут класа.
   • div>
   • nav>
   • / nav>
   • / div>
3. Дадайце спіс пунктаў меню. Неўпарадкаваны спіс (ul>) утрымлівае пункты галоўнага меню (элементы спісу li>). Калі карыстальнік пераводзіць курсор мышы, ён бачыць выпадальныя меню. Дадаць клас "clearfix" у элемент спіса; мы дабярэмся да гэтага пазней у табліцы CSS.
   • div>
   • nav>
   •       ul>
   •          li> Галоўная / li>
   •          li> Супрацоўнікі
   •          li> Кантакт
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Дадаць спасылкі. Калі гэтыя пункты меню верхняга ўзроўню таксама спасылаюцца на іх уласныя старонкі, зараз вы можаце ўставіць спасылкі. Спасылка на неіснуючы якар (напрыклад, "#!"), Нават калі яны ні на што не спасылаюцца, таму курсор карыстальніка будзе выглядаць інакш. У гэтым прыкладзе кантакт нікуды не вядзе, але два іншыя пункты меню робяць:
   • div>
   • nav>
   • ul>
   • li>a href = "/">Дадому/ a>/ li>
   • li>a href = "/ Супрацоўнікі">Супрацоўнікі/ a>
   • / li>
   • li>a href = "#!">Кантакт/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Стварыце падспісы для выпадальных элементаў. Пасля стварэння стылю гэтыя спісы ўтвараюць выпадальнае меню. Змесціце спіс у элеменце спісу, над якім карыстальнік навядзе курсор мышы. Дадайце атрыбут класа і спасылку, як і раней.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Галоўная старонка / a> / li>
   • li> a href = "/ Супрацоўнікі"> Супрацоўнікі / a>
   •          ul>
   •             li> a href = "/ borsato"> Марка Барсата / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Кантакт / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Паведаміць пра праблему / a> / li>
   •             li> a href = "/ support"> Падтрымка кліентаў / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

Частка 2 з 2: Напісанне CSS

1. Адкрыйце табліцу стыляў CSS. Размясціце спасылку на табліцу стыляў CSS у раздзеле загалоўка вашага дакумента HTML, калі спасылка яшчэ не там. У гэтым артыкуле мы не будзем разглядаць асновы CSS, такія як усталёўка шрыфта і колеру фону.
2. Дадайце код выпраўлення. Памятаеце, дадалі клас "clearfix" у спіс меню? Звычайна элементы выпадальнага меню маюць празрысты фон, які дазваляе перамяшчаць іншыя элементы. Простая адаптацыя да CSS можа вырашыць гэтую праблему. Вось добрае, хуткае выпраўленне, хоць яно не будзе працаваць у Internet Explorer 7 і раней:
   • .clearfix: пасля {
   • змест: "";
   • дысплей: стол;
   • }
3. Стварыце асноўны дызайн. З дапамогай гэтага кода вы можаце размясціць меню ўверсе старонкі і схаваць выпадальныя элементы. Гэта вельмі проста, так што мы можам засяродзіцца на адпаведным кодзе. Вы можаце змяніць яго пазней з дапамогай дадатковага кода CSS, напрыклад, запаўнення і палёў.
   • .nav-абгортка {
   • шырыня: 100%;
   • фон: # 008B8B;
   • }
   •  
   • .nav меню {
   • становішча: адноснае;
   • дысплей: убудаваны блок;
   • }
   •  
   • .sub меню {
   • пазіцыя: абсалютная;
   • дысплей: няма;
   • фон: # 555;
   • }
4. Зрабіце так, каб выпадаючыя элементы з'яўляліся пры навядзенні на іх мышы. Элементы ў выпадальным спісе цяпер усталяваны так, каб яны не паказваліся. Вось як зрабіць так, каб увесь падспіс з'явіўся, як толькі вы навядзіце курсор на "бацькоўскі":
   • .nav-меню ul li: hover> ul {
   • дысплей: блок;
   • }
   • Заўвага - калі дадатковыя меню схаваны ў пунктах меню ў выпадальным меню, дададзеныя тут ўласцівасці будуць прымяняцца да ўсіх меню. Калі вы хочаце, каб стыль прымяняўся толькі да першага ўзроўню выпадальных меню, выкарыстоўвайце ".nav-menu> ul".
5. Пакажыце стрэлкай, што ёсць выпадальнае меню. Звычайна вэб-дызайнеры паказваюць стрэлкай уніз, што элемент адкрывае выпадальнае меню. Гэты код дадае стрэлку да кожнага элемента вашага меню:
   • меню .nav> ul> li: пасля {
   • змест: " 25BC"; / * збег юнікод для стрэлкі ўніз * /
   • памер шрыфта: .5em;
   • дысплей: блок;
   • пазіцыя: абсалютная;
   •    }
   • Заўвага - Адрэгулюйце становішча стрэлкі ўласцівасцямі зверху, унізе, направа ці налева.
   • Заўвага - Калі не ва ўсіх пунктах меню ёсць выпадальныя меню, не мяняйце знешні выгляд усяго меню навігацыі па класах. Замест гэтага дадайце іншы клас (напрыклад, выпадальны) да кожнага элемента li, дзе вы хочаце стрэлку. Звярніцеся да гэтага класа ў кодзе вышэй.
6. Наладзьце абіўку, фон і іншыя ўласцівасці. Меню павінна працаваць зараз, але пакуль гэта не вельмі прыемна. З дапамогай уласцівасцей у CSS вы можаце наладзіць, як выглядае кожны клас альбо элемент і дзе яны знаходзяцца.

Парады

• Калі вы хочаце дадаць выпадальнае меню ў форму, гэта вельмі проста ў HTML5 з элементам select>.
• Спасылка a href = "#"> пракручваецца да верхняй часткі старонкі, а спасылка, якая паказвае на неіснуючы якар, напрыклад, href = "#!">, Не пракручваецца. Калі вы адчуваеце сябе занадта неакуратна, вы можаце змяніць выгляд курсора пры дапамозе CSS.
• Пры капіраванні і ўстаўцы ўзору кода выдаліце ​​ўсе маркіроўкі.