Всем привет.
Давно я не писал в блог, поэтому я приготовил большой и классный материал который многим пригодится.
Сегодня я покажу вам как сделать меню с прозрачностью и скругленными углами, работающее во всех браузерах без картинок и других костылей.
Недавно меня напряг заказчик, потребовав всю эту красоту. Я прошерстил множество сайтов, блогов и форумов. Перепробовал десятки инструкций от простых до требовавших серьезных танцев с бубном, сейчас я предлагаю вам готовое решение не требующее картинок и прочих извращений. В конце статьи рабочий пример.
Вот код.
<script type="text/javascript"> $(document).ready(function() { $('.parent').hover( //обработчик срабатывает при наведении мыши //на пункты меню у которых есть подменю (они выделены в класс "parent") function () { //добавляем класс parenthover $(this).addClass('parenthover'); //отображаем дочерний элемент div в котором находится подменю $(this).children('div').show(); }, //отменяем сделанное предыдущей функцией когда не выполняется //условие $('.parent').hover function () { $(this).children('div').hide(); $(this).removeClass("parenthover"); }) }); </script>
Далее идет непосредственно меню.
<!--div в котором лежит меню имеет свойство position:absolute, это не обязательно, просто, так проще показать прозрачность--> <div style="position: absolute;"> <ul id="topnav"> <li><a style="color: #0d719b;" href="/"> Главная</a></li> <!--небольшая подстраховка, чтобы между пунктами меню был промежуток, даже если отвалятся стили--> <li><a href="/"> Ссылка 1</a></li> <!--класс элементов у которых есть подменю--> <li class="parent"> <div class="line"></div> <!--класс подменю с прозрачностью и скругленными углами--> <div class="trans"><a href="/">Раздел 1</a> <a href="/">Раздел 2</a> <a href="/">Раздел 3</a> <a href="/">Раздел 4</a></div> <a href="/">Ссылка 2<img src="arr.png" alt="" /></a></li> <li class="parent"> <div class="line"></div> <div class="trans"> <a href="/">Раздел 5</a> <a href="/">Раздел 6</a> <a href="/">Раздел 7</a></div> <a href="/">Ссылка 3<img src="arr.png" alt="" /></a></li> </ul> </div> <!--еще один див исключительно для демонстрации прозрачности--> <div style="background: none repeat scroll 0% 0% #5a7; width: 500px; height: 50px; margin-top: 150px; position: absolute;"></div>
С кодом я надеюсь все понятно, перейдем к css.
ul#topnav { padding: 0; width: 640px; list-style: none; position: absolute; font-size: 100%; text-align:left; float: right; margin: 30px 270px; } ul#topnav li { float: left; margin: 0; padding: 0; display: list-item; z-index:999; position:relative; } .parent{ height: 30px; } ul#topnav a { padding: 7px; display: block; text-decoration: none; color:#000; position:relative; z-index:999; } ul#topnav a:hover { color:#0D719B; } .parenthover{ color:#0D719B; text-decoration: none; display: list-item; z-index:999; background: #fff; border-left:2px solid #bbb; border-right:2px solid #bbb; border-top:2px solid #bbb; /*--top right rounded corner--*/ -moz-border-radius-topright: 6px; -khtml-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; /*--top left rounded corner--*/ -moz-border-radius-topleft: 6px; -khtml-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; behavior: url(ie-css3.htc); } .trans{ /*прозрачный класс*/ opacity:0.5; filter:alpha(opacity=50); -moz-opacity:0.5; /*закругляем углы*/ -moz-border-radius: 6px; -khtml-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; behavior: url(ie-css3.htc); /*--выпрямляем левый верхний угол--*/ -moz-border-radius-topleft: 0; -khtml-border-radius-topleft: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; } ul#topnav div{ /*свойства блока подменю*/ float: left; padding: 0; margin: 0; position: absolute; left: -2px; top:30px; display: none; width: 259px; clear: both; background: #fff; color: #000; border:2px solid #bbb; z-index:-1; } /*стиль ссылок в подменю*/ ul#topnav li div a{ font-style: normal; border-bottom: 1px solid #ccc; /*font-size: 120%;*/ } /* стиль ссылок в подменю при наведении*/ ul#topnav li.parent div a:hover{ color: #0D719B; font-weight: bold; } #topnav li .line{ display:none; margin-top:0; margin-left:2px; position:absolute; border:0; background: #fff; height:2px; width:100%; color:#f00; z-index:5; }
Пример
.
Кроссбраузерное меню с прозрачностью и круглыми углами
хорошее начало