прикольная менюшка

@Sergio Aguero · Регистрация: 11.04.2012

Author24 — интернет-сервис помощи студентам

как замутить такую прикольную менюшку производителей авто как на драйве? на ховер типо всплывают названия производителей, при этом позишен фиксед к врэпперу сайта.

@Mysterious Light · 21.11.2012, 12:05

Вы смотрели, как это реализовано у них?

Кликните здесь для просмотра всего текста

HTML5

        <div class="bnav-w"><div id="bnav" class="bnav hgr">
            <ul class="bnav-list">
                
                                <li><a class="brand" href="/alfaromeo/">Alfa Romeo</a>
                                
                                <li><a class="brand" href="/astonmartin/">Aston Martin</a>
                                
                                <li><a class="brand" href="/audi/">Audi</a>
                                
                                <li><a class="brand" href="/bentley/">Bentley</a>
                                
                                <li><a class="brand" href="/bmw/">BMW</a>
                                
                                <li><a class="brand" href="/cadillac/">Cadillac</a>
                                
                                <li><a class="brand" href="/chevrolet/">Chevrolet</a>
                                
                                <li><a class="brand" href="/chrysler/">Chrysler</a>
    
<!-- [...] -->
                                <li><a class="brand" href="/lada/">Лада</a>
                                            </ul>
            <div class="i"></div>
        </div></div>

CSS

/* brands nav */
.bnav-w {position: absolute; z-index: 4; left: 920px; top: 0; width: 40px;}
.bnav {position: absolute; left: 0; top: 0; width: 160px; background-color: #4b5b73; background-position: -29px 0; font: bold 13px/28px sans-serif; white-space: nowrap;
    -webkit-transition: left .15s ease-in-out;
    -moz-transition: left .15s ease-in-out;
    -o-transition: left .15s ease-in-out;
    -ms-transition: left .15s ease-in-out;
    transition: left .15s ease-in-out;
}
.bnav-hover {left: -120px;}
.bnav-hover .i,
.bnav-list span i {clear: left; width: 160px; height: 15px; margin: 0 0 -15px; background-position: -591px -387px;}
.bnav-list {float: left;}
.bnav-hover .bnav-list {background-color: #4b5b73;}
.bnav-hover .bnav-list li:last-child {border: 0;}
.bnav-list li {clear: left; float: left; width: 100%; border-bottom: 1px solid #384048; background: url(/images/brands-3.png?1) 0 30px no-repeat;}
.bnav-list a,
.bnav-list strong {float: left; width: 120px; padding: 0 0 0 40px; color: #fff; text-decoration: none;}
.bnav-list span {display: none;}
.bnav-list-hover span {display: block;}
 
.bnav-list-active,
.bnav-list-active .brand,
.bnav-list-hover .brand,
.bnav-list span a:hover {background-color: rgba(255,255,255,.15);}
.ie .bnav-list-active .brand,
.ie .bnav-list-hover .brand,
.ie .bnav-list span a:hover {background: url(/images/vgr.png?2) 0 -900px repeat-x;}
.ie .bnav-list-active {background-color: #667388;}
 
.bnav-list span {position: absolute; left: -160px; margin-top: -1px; font: normal 12px/29px sans-serif; background: #3d4752 url(/images/vgr.png?2) bottom repeat-x;}
.bnav-list span a,
.bnav-list span i,
.bnav-list span strong {clear: left; float: left; width: 150px; padding: 0 0 0 10px; font-weight: normal;}
.bnav-list span i {background-image: url(/images/sprites.png?4);}
 
.bnav a {visibility: hidden;}
.bnav-visible a {visibility: visible;}

@basili4 · 21.11.2012, 13:11

я видел что то подобное тут http://codepen.io/tag/menu/

@Sergio Aguero 452 / 443 / 21 Регистрация: 11.04.2012 Сообщений: 2,076
		1
	прикольная менюшка 21.11.2012, 07:47. Показов 757. Ответов 2 Метки нет (Все метки) как замутить такую прикольную менюшку производителей авто как на драйве? на ховер типо всплывают названия производителей, при этом позишен фиксед к врэпперу сайта. 0

@basili4 201 / 199 / 4 Регистрация: 13.06.2012 Сообщений: 1,009 Записей в блоге: 3
	21.11.2012, 13:11	3
	я видел что то подобное тут http://codepen.io/tag/menu/ 0

Опции темы