Плавающую навигационную панель

вопрос

Здравствуйте! Подскажите пожалуйста как сделать данную плавающую навигационную панель примерно вот такую как тут ..

Заранее благодарен!

Ответил: 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>

CSS


/* == [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;
}

<script> window.addEventListener('load', ()=> { $('#category').on('change', function() { var value = $(this).val(); if ($.isArray(value)) { ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 ); } else { ShowOrHideEx("xfield_holder_year", value == 1 || value==2); } }) }); </script> year доп поле . 1 и 2 катег

Fancybox.bind("[data-highslide]", { groupAttr: 'data-highslide', idle:2000, Thumbs: false, caption: (fancybox, slide) => { if( slide.thumbEl && slide.thumbEl.alt ) { return slide.thumbEl.alt } } });

Плавающую навигационную панель

Ответил: vardanpetrosyan

2 комментария

Похожие вопросы

Разное количество новостей для { content } или панель навигации для тега { custom }

Выбор категории при быстром редактировании

description с дополнительных полей Dle

Яндекс робот получил полный запрет на индексирование моего сайта в файле robots.txt

Как вставить в окно уведомления автора новости панель ббкодов?

какие файлы отвечают за админ панель

Как убрать боковую навигацию для определённого раздела?

Не могу редактировать шаблон через админ панель

Проблема при добавление новости

форма входа и tooltip