Выпадающее меню с закладками

Выпадающее меню с разделением первого уровня на секции с помощью закладок. Часть работы будет выполнять jQuery. Всего в меню имеется три уровня. 

Разметка HTML

Закладки располагаются в отдельном контейнере. Текущая активная закладка имеет класс "active". Структурная связь между закладками и пунктами меню осуществляется с помощью атрибута id и кода jQuery. Сами пункты меню формируются на основе неупорядоченного списка.

01           <!-- Элементы закладок основного меню -->

02           <div id="tabs-container">

03                <ul class="tabs">

04                    <li class="active"><a href="#">Раздел 1</a></li>

05                    <li><a href="#">Раздел 2</a></li>

06                    <li><a href="#">Раздел 3</a></li>

07                    <li><a href="#">Раздел 4</a></li>

08                </ul>

09           </div>

10          

11           <!-- Верхнее меню -->

12           <div id="nav-container">

13                <ul class="nav" id="1">

14                    <!-- Элементы верхнего меню -->

15                    <li><a href="#">Меню 1</a></li>

16                    <li><a href="#">Меню 2</a>

17                        <!-- Элементы подменю -->

18                        <ul class="sub">

19                            <li><a href="#">Подменю 2_1</a></li>

20                            <li><a href="#">Подменю 2_2</a></li>

21                            <li><a href="#">Подменю 2_3</a></li>

22                            <li><a href="#">Подменю 2_4</a></li>

23                        </ul>

24                    </li>

25                . . .

26                </ul>

27           . . .

28           </div>

CSS

001         /* Стили основного меню */

002        

003         /* Секция закладок */

004         #tabs-container {

005             clear:both;

006             font-size:11px;

007             height:26px;

008             margin:0 auto;

009             padding:0

010         }

011         .tabs li {

012             float:left;

013             list-style:none;

014             position:relative

015         }

016         .tabs li a:first-child {

017             margin-left:10px

018         }

019         .tabs li a {

020             background:#f3f3f3;

021             border:none;

022             border-left:1px solid #d5d5d5;

023             border-right:1px solid #d5d5d5;

024             border-top:1px solid #d5d5d5;

025             color:#333;

026             display:block;

027             margin:0 2px 0 0;

028             padding:6px 10px 4px

029         }

030         .tabs li.active a {

031             -webkit-border-radius:4px 4px 0 0;

032             background:#fff;

033             border-bottom:1px solid #fff;

034             border-left:1px solid #d5d5d5;

035             border-radius:4px 4px 0 0;

036             border-right:1px solid #d5d5d5;

037             border-top:1px solid #d5d5d5;

038             color:#222;

039             display:block;

040             padding:6px 10px 4px

041         }

042         .tabs li.child a {

043             -webkit-border-radius:0 4px 0 0;

044             background:#f3f3f3;

045             border-radius:0 4px 0 0;

046             color:#333;

047             display:block;

048             margin:0;

049             padding:6px 10px 4px

050         }

051         .tabs li a:hover {

052             background:#fafafa;

053             border-bottom:1px solid #d5d5d5;

054             color:#fff;

055             text-decoration:none

056         }

057        

058         /* Меню первого уровня */

059         .tabs {

060             display:block;

061             margin:0;

062             padding:1px 0 2px;

063             position:absolute;

064             z-index:100

065         }

066         .tabs > li > a:hover {

067             background:#ececec;

068             color:#222

069         }

070         .tabs > li.active > a:hover {

071             -moz-border-radius:3px 3px 0 0;

072             -webkit-border-radius:3px 3px 0 0;

073             background:#fff;

074             border-bottom:1px solid #fff;

075             border-radius:3px 3px 0 0;

076             color:#222

077         }

078        

079         /*Выпадающая навигация*/

080         #nav-container {

081             border-bottom:1px solid #d5d5d5;

082             border-top:1px solid #d5d5d5;

083             clear:both;

084             font-size:11px;

085             height:33px;

086             margin:0 auto;

087             padding:0

088         }

089        

090         /* Меню первого и второго уровня */

091         .nav li {

092             float:left;

093             list-style:none;

094             position:relative

095         }

096         .nav li a {

097             background:url(images/arrow.png) no-repeat right;

098             border:none;

099             color:#222;

100             display:block;

101             margin:0 5px 0 0;

102             padding:5px 20px 5px 8px

103         }

104        

105         /* Меню первого уровня */

106         .nav {

107             display:block;

108             margin:0;

109             padding:5px 0 2px;

110             position:absolute;

111             z-index:100

112         }

113         .nav > li > a:hover {

114             -moz-border-radius:3px 3px 0 0;

115             -webkit-border-radius:3px 3px 0 0;

116             background:#507aa5 url(images/arrow_hover.png) no-repeat right;

117             border-radius:3px 3px 0 0;

118             color:#fff;

119             padding:5px 20px 5px 8px

120         }

121        

122         /* Меню второго уровня */

123         .nav li ul {

124             -moz-border-radius-bottomleft:3px;

125             -moz-border-radius-bottomright:3px;

126             -moz-border-radius-topright:3px;

127             -moz-box-shadow:1px 1px 1px #333;

128             -webkit-border-bottom-right-radius:3px;

129             -webkit-box-shadow:1px 1px 1px #333;

130             background:#507aa5;

131             border-bottom-left-radius:3px;

132             border-bottom-right-radius:3px;

133             border-top-right-radius:3px;

134             box-shadow:1px 1px 1px #333;

135             color:#222;

136             display:none;

137             margin:0;

138             padding:2px 0;

139             position:absolute;

140             width:140px

141         }

142         .nav li ul li {

143             width:100%

144         }

145         .nav li ul li a {

146             background:#507aa5;

147             border:none;

148             color:#fff;

149             line-height:25px;

150             margin:0;

151             padding:0 0 0 8px

152         }

153         .nav li ul li a:hover {

154             background:#466A90

155         }

156         .nav li ul li.strong-archive a {

157             border-top:1px solid #466A90;

158             font-weight:600

159         }

160        

161         /* Класс добавляется с помощью jQuery */

162         .nav li.current > a {

163             -moz-border-radius:3px 3px 0 0;

164             -moz-box-shadow:1px 1px 1px #333;

165             -webkit-border-radius:3px 3px 0 0;

166             -webkit-box-shadow:1px 1px 1px #333;

167             background:#507aa5 url(images/arrow_hover.png) no-repeat right;

168             border-radius:3px 3px 0 0;

169             box-shadow:1px 1px 1px #333;

170             color:#fff

171         }

172        

173         /* Обратная совместимость CSS */

174         .nav li:hover > ul.child {

175             display:block

176         }

jQuery

Переключение закладок и проявление выпадающих подпунктов осуществляется с помощью кода JavaScript/ В обработчиках событий мыши устанавливаются соответствующие классы и свойства.

01           $(document).ready(function(){

02               $('.tabs li a').click(function () {

03                 $('.tabs li').removeClass('active');

04                 $(this).parent().addClass('active');

05          

06                 $('.nav').hide();

07                 var index = $('.tabs li a').index(this);

08                 $('.nav').eq(index).show();

09                 return false;

10               });

11          

12               $('.nav li').has('ul').hover(function(){

13                   $(this).addClass('current').children('ul').fadeIn();

14               }, function() {

15                   $(this).removeClass('current').children('ul').hide();

16               });

17           });

Данный урок подготовлен для вас командой сайта ruseller.com

Источник урока: www.script-tutorials.com/creating-css3jquery-crossbrowser-dropdown-menu-with-tabs/
Перевел: Сергей Фастунов