вопрос
Здравствуйте! Подскажите пожалуйста как сделать данную плавающую навигационную панель примерно вот такую как тут ..
Заранее благодарен!
Заранее благодарен!
Ответил: vardanpetrosyan
<div id="navbar">
<nav role="navigation">
<ul class="menu main-menu">
<li><a href="/"><span>Главная</span></a></li>
<li><a href="/"><span>Раздел</span></a></li>
<li>
<a href="/"><span>Раздел</span></a>
<ul>
<li><a href="/">Подраздел 1</a></li>
<li><a href="/">Подраздел 2</a></li>
<li><a href="/">Подраздел 3</a></li>
</ul>
</li>
<li>
<a href="/"><span>Информация</span></a>
<ul>
<li><a href="/">Подраздел 1</a></li>
<li><a href="/">Подраздел 2</a></li>
</ul>
</li>
<li><a href="/index.php?do=feedback"><span>Контакты</span></a></li>
</ul>
</nav>
<div class="ad-nav">
<ul class="menu">
<li>
<a class="controls"><span>Жанры</span></a>
<ul class="genres">
<li><a href="#">Анимация</a></li>
<li><a href="#">Боевик</a></li>
<li><a href="#">Вестерн</a></li>
<li><a href="#">Военный</a></li>
<li><a href="#">Детектив</a></li>
<li><a href="#">Документальный</a></li>
<li><a href="#">Драма</a></li>
<li><a href="#">Исторический</a></li>
<li><a href="#">Катастрофы</a></li>
<li><a href="#">Комедия</a></li>
<li><a href="#">Мелодрама</a></li>
<li><a href="#">Мистика</a></li>
<li><a href="#">Мультфильм</a></li>
<li><a href="#">Мюзикл</a></li>
<li><a href="#">Отечественный</a></li>
<li><a href="#">Пародия</a></li>
<li><a href="#">Приключения</a></li>
<li><a href="#">Семейный</a></li>
<li><a href="#">Спорт</a></li>
<li><a href="#">Триллер</a></li>
<li><a href="#">Ужасы</a></li>
<li><a href="#">Фантастика</a></li>
<li><a href="#">Эротика</a></li>
</ul>
</li>
<li>
<a class="controls"><span>Алфавит</span></a>
<ul class="alpabet">
<li><a href="#">0-9</a></li>
<li><a href="#">А</a></li>
<li><a href="#">Б</a></li>
<li><a href="#">В</a></li>
<li><a href="#">Г</a></li>
<li><a href="#">Д</a></li>
<li><a href="#">Е</a></li>
<li><a href="#">Ж</a></li>
<li><a href="#">З</a></li>
<li><a href="#">И</a></li>
<li><a href="#">К</a></li>
<li><a href="#">Л</a></li>
<li><a href="#">М</a></li>
<li><a href="#">Н</a></li>
<li><a href="#">О</a></li>
<li><a href="#">П</a></li>
<li><a href="#">Р</a></li>
<li><a href="#">С</a></li>
<li><a href="#">Т</a></li>
<li><a href="#">У</a></li>
<li><a href="#">Ф</a></li>
<li><a href="#">X</a></li>
<li><a href="#">Ц</a></li>
<li><a href="#">Ч</a></li>
<li><a href="#">Ш</a></li>
<li><a href="#">Щ</a></li>
<li><a href="#">Э</a></li>
<li><a href="#">Ю</a></li>
<li><a href="#">Я</a></li>
</ul>
</li>
</ul>
</div>
<div class="search-area">
<form action="" name="searchform" method="post">
<input type="hidden" name="do" value="search" />
<input type="hidden" name="subaction" value="search" />
<input type="text" name="story" id="story" placeholder="Поиск..." />
<button role="submit"><span>Найти</span></button>
</form>
</div>
<div class="clear"></div>
</div>
/* == [navbar] ========================================= */
#navbar {
position:relative;
padding:10px;
margin-top:2%;
background:url(../images/bg/op-10.png) repeat 0 0;
background:rgba(0,0,0,.1);
*zoom:1;
}
/* -- [navbar menu] ---------------- */
#navbar a {
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#navbar .menu li {
float:left;
display:block;
margin:0;
}
#navbar .menu li a {
position:relative;
display:block;
height:30px;
padding:0 .7em;
font-family: 'PT Sans Narrow', Arial, Helvetica, sans-serif;
font-size:1.25em;
text-transform:uppercase;
line-height:30px;
text-decoration:none;
}
#navbar .menu li span {
cursor:pointer;
}
#navbar .menu li.first a {
border-radius: 2px 0 0 2px;
}
#navbar .menu li.last a {
border-radius: 0 2px 2px 0;
}
#navbar .menu li.first li a,
#navbar .menu li.last li a {
border-radius:0
}
/* -- [level 2] */
#navbar .menu li ul {
position:absolute;
display:none;
background:#fff;
font-size:.8em;
z-index:75;
}
/* -- [main menu] ------------------ */
#navbar nav {
position:relative;
float:left;
max-width:49%;
z-index:50;
}
#navbar .main-menu li {
position:relative;
}
#navbar .main-menu li a {
color:#fff;
background:#333;
}
#navbar .main-menu li:hover a,
#navbar .main-menu li a:hover {
color:#000;
background:#fff;
}
/* -- [level 2] */
#navbar .main-menu li ul {
top:30px;
left:-1px;
overflow:hidden;
width:160px;
border-style:none solid solid;
border-width:1px;
border-color:#666;
}
#navbar .main-menu li li {
float:none;
border-bottom:1px dotted #eee;
white-space:nowrap;
}
#navbar .main-menu li li.last {
border:none;
}
#navbar .main-menu li li a {
background:none;
color:#000;
}
#navbar .main-menu li li a:hover {
color:#f30;
text-indent:.5em;
}
/* -- [ad-nav] --------------------- */
.ad-nav {
position: absolute;
right: 0;
top: 10px;
width: 100%;
}
#navbar .ad-nav > ul {
float:right;
margin-right:26%;
}
#navbar .ad-nav li a {
color:#000;
background-color:#fff;
background:rgba(255,255,255,.8);
}
#navbar .ad-nav li:hover a.controls,
#navbar .ad-nav li a.controls:hover {
padding-bottom:10px;
color:#f30;
background:#fff;
}
#navbar .ad-nav li.first:hover a {
border-radius: 2px 0 0 0;
}
#navbar .ad-nav li.last:hover a {
border-radius: 0 2px 0 0;
}
/* -- [level 2] */
#navbar .ad-nav li ul {
left:0;
top:40px;
width:100%;
border-bottom:2px solid #ccc;
}
#navbar .ad-nav li {
float:left;
display:block;
}
#navbar .ad-nav .genres li {
margin:.3em 0 0 .5%;
padding:.2em 0;
width:12%;
}
#navbar .ad-nav .alpabet li a {
padding:0 .9em;
}
#navbar .ad-nav li li a {
color:#000;
background:none;
}
#navbar .ad-nav .genres li a {
float:left;
height:auto;
line-height:1em;
padding:.4em .7em;
}
#navbar .ad-nav li li a:hover {
color:#fff;
background:#f30;
}
/* == [search] ========================================= */
.search-area {
position:relative;
float:right;
width:24%;
}
.search-area button,
.search-area input {
border:0;
transition:all .4s ease;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;
-ms-transition:all .4s ease;
}
.search-area #story {
position:absolute;
right:0;
padding-right:30px;
*padding:0;
width:100%;
height:30px;
box-shadow:0 0 0 2px rgba(0,0,0,.2);
}
.search-area #story:focus {
width:180%;
box-shadow:0 0 0 2px rgba(255,51,0,1);
}
.search-area button {
position:absolute;
right:0;
padding:5px;
width:30px;
height:30px;
background-color:none;
background-image:none;
opacity:.6;
border-radius:0;
box-shadow:none;
}
.search-area button span {
display:block;
width:20px;
height:20px;
background-image:url(../images/ico-sm-sprites.png);
background-repeat:no-repeat;
background-position:-100px -0;
text-indent:-5555em;
}
.search-area button:hover {
box-shadow:none;
opacity:1;
}
