Горизонтальное меню с оверлей эффектом на CSS3 и jQuery

Разместил: Apocalypse
Опубликовано: 13 сентября 2015

Горизонтальное многоуровневое меню, которое использует оверлей эффект (Затемнение остального пространства сайта) для максимальной фокуссировке на элементах Для начала посмотрите ДЕМО Моё тестирование в фидле КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

.oe_overlay, .oe_menu, .oe_menu * {
margin:0;
padding:0;
}
.oe_overlay {
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
ul.oe_menu {
list-style:none;
position:relative;
margin:30px 0px 0px 40px;
width:560px;
float:left;
clear:both;
}
ul.oe_menu > li {
width:112px;
height:101px;
padding-bottom:2px;
float:left;
position:relative;
}
ul.oe_menu > li > a {
display:block;
background-color:#101010;
color:#aaa;
text-decoration:none;
font-weight:bold;
font-size:12px;
width:90px;
height:80px;
padding:10px;
margin:1px;
text-shadow:0px 0px 1px #000;
opacity:0.8;
}
ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a {
background:#fff;
color:#101010;
opacity:1.0;
}
.oe_wrapper ul.hovered > li > a {
background:#fff;
text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div {
position:absolute;
top:103px;
left:1px;
background:#fff;
width:498px;
height:180px;
padding:30px;
display:none;
}
ul.oe_menu div ul li a {
text-decoration:none;
color:#222;
padding:2px 2px 2px 4px;
margin:2px;
display:block;
font-size:12px;
}
ul.oe_menu div ul.oe_full {
width:100%;
}
ul.oe_menu div ul li a:hover {
background:#000;
color:#fff;
}
ul.oe_menu li ul {
list-style:none;
float:left;
width: 150px;
margin-right:10px;
}
li.oe_heading {
color:#aaa;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
}

.oe_overlay, .oe_menu, .oe_menu * {

margin:0;

padding:0;

}

.oe_overlay {

background:#000;

opacity:0;

position:fixed;

top:0px;

left:0px;

width:100%;

height:100%;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);

}

ul.oe_menu {

list-style:none;

position:relative;

margin:30px 0px 0px 40px;

width:560px;

float:left;

clear:both;

}

ul.oe_menu > li {

width:112px;

height:101px;

padding-bottom:2px;

float:left;

position:relative;

}

ul.oe_menu > li > a {

display:block;

background-color:#101010;

color:#aaa;

text-decoration:none;

font-weight:bold;

font-size:12px;

width:90px;

height:80px;

padding:10px;

margin:1px;

text-shadow:0px 0px 1px #000;

opacity:0.8;

}

ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a {

background:#fff;

color:#101010;

opacity:1.0;

}

.oe_wrapper ul.hovered > li > a {

background:#fff;

text-shadow:0px 0px 1px #FFF;

}

ul.oe_menu div {

position:absolute;

top:103px;

left:1px;

background:#fff;

width:498px;

height:180px;

padding:30px;

display:none;

}

ul.oe_menu div ul li a {

text-decoration:none;

color:#222;

padding:2px 2px 2px 4px;

margin:2px;

display:block;

font-size:12px;

}

ul.oe_menu div ul.oe_full {

width:100%;

}

ul.oe_menu div ul li a:hover {

background:#000;

color:#fff;

}

ul.oe_menu li ul {

list-style:none;

float:left;

width: 150px;

margin-right:10px;

}

li.oe_heading {

color:#aaa;

font-size:16px;

margin-bottom:10px;

padding-bottom:6px;

border-bottom:1px solid #ddd;

}

2#: После /head на нужных страницах вставьте:

<script>
$(function () {
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
var $oe_overlay = $('#oe_overlay');

$oe_menu_items.bind('mouseenter', function () {
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index', '9999').stop(true, true).slideDown(200, function () {
$oe_menu_items.not('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave', function () {
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index', '1');
});

$oe_menu.bind('mouseenter', function () {
var $this = $(this);
$oe_overlay.stop(true, true).fadeTo(200, 0.6);
$this.addClass('hovered');
}).bind('mouseleave', function () {
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true, true).fadeTo(200, 0);
$oe_menu_items.children('div').hide();
})
});
</script>

$(function () {

var $oe_menu = $('#oe_menu');

var $oe_menu_items = $oe_menu.children('li');

var $oe_overlay = $('#oe_overlay');

$oe_menu_items.bind('mouseenter', function () {

var $this = $(this);

$this.addClass('slided selected');

$this.children('div').css('z-index', '9999').stop(true, true).slideDown(200, function () {

$oe_menu_items.not('.slided').children('div').hide();

$this.removeClass('slided');

});

}).bind('mouseleave', function () {

var $this = $(this);

$this.removeClass('selected').children('div').css('z-index', '1');

});

$oe_menu.bind('mouseenter', function () {

var $this = $(this);

$oe_overlay.stop(true, true).fadeTo(200, 0.6);

$this.addClass('hovered');

}).bind('mouseleave', function () {

var $this = $(this);

$this.removeClass('hovered');

$oe_overlay.stop(true, true).fadeTo(200, 0);

$oe_menu_items.children('div').hide();

})

});

</script>

3#: В то место, где будет само меню, вставьте:

<div id="oe_overlay" class="oe_overlay"></div>
<ul id="oe_menu" class="oe_menu">
<li><a href="">Collections</a>
<div>
<ul>
<li class="oe_heading">Summer 2011</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Special Events</a></li>
<li><a href="#">Runway Show</a></li>
<li><a href="#">Overview</a></li>
</ul>
<ul>
<li class="oe_heading">Winter 2010</li>
<li><a href="#">Milano</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">Behind the scenes</a></li>
<li><a href="#">Interview</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Download</a></li>
</ul>
<ul>
<li class="oe_heading">Categories</li>
<li><a href="#">Casual</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Underwear</a></li>
<li><a href="#">Nature Pure</a></li>
<li><a href="#">Swimwear</a></li>
<li><a href="#">Evening</a></li>
</ul>
</div>
</li>
<li><a href="">Projects</a>
<div style="left:-111px;"><!-- -112px -->
<ul>
<li class="oe_heading">Fashion Shows</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Events</li>
<li><a href="#">Fashion Party 2011</a></li>
<li><a href="#">Evening specials</a></li>
<li><a href="#">Fashion Day Milano</a></li>
<li><a href="#">Model Workshops</a></li>
</ul>
<ul>
<li class="oe_heading">Media</li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Contest 2011</a></li>
<li><a href="#">Fashion Mania</a></li>
<li><a href="#">Green Earth Day</a></li>
</ul>
</div>
</li>
<li><a href="">Fragrances</a>
<div style="left:-223px;">
<ul class="oe_full">
<li class="oe_heading">Fashion Fragrances</li>
<li><a href="#">Deálure</a></li>
<li><a href="#">Violet Woman</a></li>
<li><a href="#">Deep Blue for Men</a></li>
<li><a href="#">New York, New York</a></li>
<li><a href="#">Illusion</a></li>
</ul>
</div>
</li>
<li><a href="">Events</a>
<div style="left:-335px;">
<ul>
<li class="oe_heading">Shows 2010</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Shows 2011</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Special Events</li>
<li><a href="#">Fashion Party 2011</a></li>
<li><a href="#">Fashion Countdown Party 2010</a></li>
<li><a href="#">Fashion Day Milano</a></li>
<li><a href="#">Model Workshops</a></li>
</ul>
</div>
</li>
<li><a href="">Stores</a>
<div style="left:-447px;">
<ul>
<li class="oe_heading">Europe</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Asia</li>
<li><a href="#">Hong Kong</a></li>
<li><a href="#">Tokio</a></li>
<li><a href="#">New Delhi</a></li>
<li><a href="#">Beijing</a></li>
</ul>
<ul>
<li class="oe_heading">United States</li>
<li><a href="#">New York</a></li>
<li><a href="#">Los Angeles</a></li>
<li><a href="#">Seattle</a></li>
<li><a href="#">Miami</a></li>
</ul>
</div>
</li>
</ul>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

<li><a href="">Collections</a>

<div>

<ul>

<li class="oe_heading">Summer 2011</li>

<li><a href="#">Milano</a></li>

<li><a href="#">Paris</a></li>

<li><a href="#">Special Events</a></li>

<li><a href="#">Runway Show</a></li>

<li><a href="#">Overview</a></li>

</ul>

<ul>

<li class="oe_heading">Winter 2010</li>

<li><a href="#">Milano</a></li>

<li><a href="#">Behind the scenes</a></li>

<li><a href="#">Interview</a></li>

<li><a href="#">Photos</a></li>

<li><a href="#">Download</a></li>

</ul>

<ul>

<li class="oe_heading">Categories</li>

<li><a href="#">Casual</a></li>

<li><a href="#">Business</a></li>

<li><a href="#">Underwear</a></li>

<li><a href="#">Nature Pure</a></li>

<li><a href="#">Swimwear</a></li>

<li><a href="#">Evening</a></li>

</ul>

</div>

</li>

<li><a href="">Projects</a>

<ul>

<li class="oe_heading">Fashion Shows</li>

<li><a href="#">Milano</a></li>

<li><a href="#">Paris</a></li>

<li><a href="#">Berlin</a></li>

<li><a href="#">London</a></li>

</ul>

<ul>

<li class="oe_heading">Events</li>

<li><a href="#">Fashion Party 2011</a></li>

<li><a href="#">Evening specials</a></li>

<li><a href="#">Fashion Day Milano</a></li>

<li><a href="#">Model Workshops</a></li>

</ul>

<ul>

<li class="oe_heading">Media</li>

<li><a href="#">Wallpapers</a></li>

<li><a href="#">Downloads</a></li>

<li><a href="#">Images</a></li>

<li><a href="#">Contest 2011</a></li>

<li><a href="#">Fashion Mania</a></li>

<li><a href="#">Green Earth Day</a></li>

</ul>

</div>

</li>

<li><a href="">Fragrances</a>

<li class="oe_heading">Fashion Fragrances</li>

<li><a href="#">Deálure</a></li>

<li><a href="#">Violet Woman</a></li>

<li><a href="#">Illusion</a></li>

</ul>

</div>

</li>

<li><a href="">Events</a>

<ul>

<li class="oe_heading">Shows 2010</li>

<li><a href="#">Milano</a></li>

<li><a href="#">Paris</a></li>

<li><a href="#">Berlin</a></li>

<li><a href="#">London</a></li>

</ul>

<ul>

<li class="oe_heading">Shows 2011</li>

<li><a href="#">Milano</a></li>

<li><a href="#">Paris</a></li>

<li><a href="#">Berlin</a></li>

<li><a href="#">London</a></li>

</ul>

<ul>

<li class="oe_heading">Special Events</li>

<li><a href="#">Fashion Party 2011</a></li>

<li><a href="#">Fashion Countdown Party 2010</a></li>

<li><a href="#">Fashion Day Milano</a></li>

<li><a href="#">Model Workshops</a></li>

</ul>

</div>

</li>

<li><a href="">Stores</a>

<ul>

<li class="oe_heading">Europe</li>

<li><a href="#">Milano</a></li>

<li><a href="#">Paris</a></li>

<li><a href="#">Berlin</a></li>

<li><a href="#">London</a></li>

</ul>

<ul>

<li><a href="#">Tokio</a></li>

<li><a href="#">New Delhi</a></li>

<li><a href="#">Beijing</a></li>

</ul>

<ul>

<li class="oe_heading">United States</li>

<li><a href="#">Los Angeles</a></li>

<li><a href="#">Seattle</a></li>

<li><a href="#">Miami</a></li>

</ul>

</div>

</li>

</ul>

</div>

За основу взята статья с ЭТОГО сайта

Автор публикации

не в сети 4 дня

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: CSS3 jQuery Горизонтальное Меню Оверлей Эффект

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

6 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

Гость

Михаил

8 лет назад

Никак не выходит под меню - работают только верхние кнопки и без затемнения
Что может быть?

Ответить

Автор

Apocalypse

8 лет назад

Ответить на Михаил

Можно ссылку на страницу, где установлено меню?

Ответить

Гость

Михаил

8 лет назад

Ответить на Apocalypse

Логотип сайта с ссылкой на главную может как то влиять?
http://irkutsk.gsiwinner.ru

Ответить

Автор

Apocalypse

8 лет назад

Ответить на Михаил

Логотип не может. В консоли выбивает ошибку "$ is not a function". Это легко исправляется. В скрипте перед $(function () { вставь $ = jQuery;

Ответить

Гость

Михаил

8 лет назад

Ответить на Apocalypse

Спасибо за помощь!
Успехов!
Буду заходить.

Ответить

Гость

Михаил

8 лет назад

Да кот - класс!

Ответить

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

Всевидящее око

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

Всевидящее око

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

Для публикации сообщений в чате необходимо авторизоваться

Горизонтальное меню с оверлей эффектом на CSS3 и jQuery

Автор публикации

Apocalypse

Вам может также понравиться...

Посетители сайта

Панель управления

Ноябрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Горизонтальное меню с оверлей эффектом на CSS3 и jQuery

Автор публикации

Apocalypse

Вам может также понравиться...

Игра в мячики от @OoyoO на HTML5 canvas

Простой ротатор текста внутри блока через плагин List Ticker на jQuery

Летающие светящиеся шары на HTML5 Canvas

Посетители сайта

Панель управления