Для компактности некоторых позиций своего сайта нам иногда приходится встраивать некоторые элементы в другой. Как к примеру могли часто замечать, что форма поиска по сайту встроена в самом горизонтальном меню. Я считаю, что пользователь зашедший на сайт в первую очередь обращает внимание на горизонтальное меню. Так вот, когда он смотрит на меню то сразу замечает, что можно воспользоваться поиском по сайту. Но зачем его видеть этот поиск скажете вы! Да потому, что часто пользователю трудно сориентироваться по разделам или разметке вашего сайта, и опытный пользователь обязательно воспользуется формой поиска для достижения искомого результата.
Я к примеру постоянно пользуюсь поиском. Это предотвратит уход с вашего сайта, увеличит количество просмотров страниц. Возможно пользуясь хорошим поиском пользователь вернется на ваш сайт еще не раз! Что не мало важно при создании своих сайтов.
Код HTML
<div class="navMenu expander">
<form action="">
<input type="text">
<a href="/">Главная</a>
<a href="/contacts.php">Контакты</a>
<a href="/questions/">Вопрос/Ответ</a>
<a href="/about.php">Кто я</a>
<a href="/news/">Новости</a>
</form>
</div>
А вот и само оформление на css3
CSS3 код
.navMenu {
height: 36px;
line-height: 36px;
width: 900px;
/* CSS 3 */
background-image: linear-gradient(bottom, rgb(170,170,170) 11%, rgb(238,238,238) 77%);
background-image: -o-linear-gradient(bottom, rgb(170,170,170) 11%, rgb(238,238,238) 77%);
background-image: -moz-linear-gradient(bottom, rgb(170,170,170) 11%, rgb(238,238,238) 77%);
background-image: -webkit-linear-gradient(bottom, rgb(170,170,170) 11%, rgb(238,238,238) 77%);
background-image: -ms-linear-gradient(bottom, rgb(170,170,170) 11%, rgb(238,238,238) 77%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.11, rgb(170,170,170)), color-stop(0.77, rgb(238,238,238)) );
border-radius: 5px;
}
.navMenu a {
color: #333;
border-right: 1px solid rgba(255,255,255,.5);
display: inline-block;
float: left;
font-size: 12px;
padding: 0 15px;
text-align: center;
text-shadow: 0 1px 1px #FFF;
text-transform: uppercase;
text-decoration: none;
width: 115px;
/* CSS3 */
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.navMenu a:hover { background-color: rgba(0, 0, 0,.05) }
.navMenu input {
/* Путь к иконке */
background: url("/images/searchicon.png") 5px center no-repeat #FFF;
border: 1px solid #AAA;
color: #666;
float: right;
font-size: 11px;
margin: 7px 32px 0 0;
opacity: 0.6;
outline: none;
padding: 3px 5px 3px 20px;
width: 80px;
/* CSS3 */
border-radius: 5px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.navMenu input:hover { opacity: 1 }
.navMenu input:focus {
opacity: 1;
width: 180px;
}
.navMenu input:focus ~ a { width: 95px }
Выводы.
Сегодня мы создали красивое css3 горизонтальное меню для сайта с встроенной формой поиска.