Випадає горизонтальне меню з пошуком на css3 і html5

У даній статті ми створимо випадає горизонтальне меню з полем для пошуку за допомогою CSS3 і HTML5.

Приклад даного меню можна побачити тут:

Подивитися прімерСкачать

HTML частина

Навігації складається з невпорядкованого списку (з класом .nav), Який містить всередині:

Елементи списку, які містять звичайні посилання і не мають ніякого ідентифікатора або класу;
#settings всередині якого зображення як посилання;
#search містить поле для пошуку і кнопку відправки тексту;
#options містить посилання і список (з класом .subnav), Який працює як меню, що випадає.

1234567891011121314151617181920212223242526

lt;ul class="Nav"gt;lt;li id="Settings"gt;lt;a href="#"gt; lt;img src="Images / settings.jpg"gt; lt;/agt;lt;/ligt;lt;ligt;lt;a href="#"gt; Додаткиlt;/agt;lt;/ligt;lt;ligt;lt;a href="#"gt; Сервісlt;/agt;lt;/ligt;lt;li id="Search"gt;lt;form action="" method="Get"gt;lt;input name="Search_text" id="Search_text" placeholder="Пошук ..." type="Text"gt;lt;input name="Search_button" id="Search_button" type="Button"gt;lt;/formgt;lt;/ligt;lt;li id="Options"gt;lt;a href="#"gt; Менюlt;/agt;lt;ul class="Subnav"gt;lt;ligt; lt;a href="#"gt; Налаштуванняlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Додаткиlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Сервісlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Різнеlt;/agt; lt;/ligt;lt;/ulgt;lt;/ligt;lt;/ulgt;

CSS частина

Базові стилі:

1234	* {margin: 0-padding: 0-}

Відео: CSS3 для початківців | # 10 Створення горизонтального меню

Навігація і вид списку

1234567891011

.nav {background: # 232323-height: 60px-display: inline-block-}.nav li {float: left-list-style-type: none-position: relative-}

Тут задали фон для меню, а також розташували горизонтально елементи списку.

Посилання в меню

123456789101112131415161718192021

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

Посилання мають висоту блоку, тобто весь блок буде посиланням. При наведенні на посилання фон змінюється на сірий. Блок з ідентифікатором #settings містить зображення, тому для нього поставили такі властивості.

поле пошуку

1234567891011121314151617181920212223242526272829303132333435363738394041424344

#search {width: 357px-margin: 4px-}#search_text {width: 297px-padding: 15px 0 15px 20px-font-size: 16px-font-family: sans-serif, Arial-border: 0 none-height: 52px-margin-right: 0-color: white-outline: none-background: # 1f7f5c-float: left-box-sizing: border-box-transition: all 0.15s-}:: -webkit-input-placeholder { / * WebKit браузери * /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("../images/search.jpg") center no-repeat-width: 60px-float: left-padding: 0-text-align: center-height: 52px-cursor: pointer-}

Тут йде оформлення поля з пошуком. Задані різні властивості, при наведенні, при фокусі і т.д.

випадає частина

12345678910111213141516171819202122232425262728293031

#options a {border-left: 0 none-}#optionsgt;a {background-image: url("../images/triangle.jpg")-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 {float: none-}.subnav li a {border-bottom: 1px solid # 2e2e2e-}#options: hover .subnav {visibility: visible-top: 100%-opacity: 1-}