|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
16.12.2014, 15:53 | #1 |
Пользователь
Регистрация: 26.05.2008
Сообщений: 30
|
Всплывающее меню и слайдер
У меня возникла проблема, сделал всплывающее меню, и слайдер, но никакой z-index не помогает отобразить меню поверх слайдера. Если кто может, помогите пожалуйста разобраться.
html-код: Код HTML:
<!--ВСПЛЫВАЮЩЕЕ МЕНЮ--> <div class="example_shown"><div class="example_hidden">+375(29)333 92 94</div></div> <!--СЛАЙДЕР--> <ul id="my_slider"> <li><img src="data_images/banner.jpg" alt="" /></li> <li><img src="data_images/banner.jpg" alt="" /></li> <li><img src="data_images/banner.jpg" alt="" /></li> </ul> Код HTML:
<!--ВСПЛЫВАЮЩЕЕ МЕНЮ--> .example_shown { display:block; height: 35px; width: 35px; margin: 67px 0px 0px 5px; float: left; background-image: url(img/phone.png); background-size: 100% 100%; } .example_hidden { display:none; } .example_shown:hover .example_hidden { display:block; height: 200px; width: 200px; margin: 60px 0px 0px 48px; float: right; background-color: #808080; background-size: 100% 100%; opacity: 1; } <!--СЛАЙДЕР--> #my_slider { width:1120px; height:420px; overflow: hidden; position:relative; list-style: none outside none; padding:0; margin: 25px 0px 0px 40px; border: 1px solid #000; float: left; } #my_slider li { position: absolute; top: 0px; left: 0px; display:none; } #my_slider li:first-child { display:block; } |
16.12.2014, 16:50 | #2 | |
Форумчанин
Регистрация: 30.05.2011
Сообщений: 651
|
Цитата:
Управление слоями осуществляется только через z-index. Если не помогает, значит где-то стили просто перекрываются
Создание, программирование и сопровождение сайтов любой сложности.
Изготовление программ на заказ. Список услуг и портфолио на сайте www.andreygrom.ru |
|
16.12.2014, 17:12 | #3 | |
Пользователь
Регистрация: 26.05.2008
Сообщений: 30
|
Цитата:
Index.HTML: Код HTML:
<!DOCTYPE html> <html lang=ru> <head> <meta charset=utf-8> <title>PAS</title> <link rel="stylesheet" href="styles.css"/> <link rel="stylesheet" href="css/main.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </head> <body> <div class="GlBlockPas"> <div id="LogoPas"></div> <div id="MenuPas"> <a href="Index.html" class="GS">О компании</a> <a href="Index.html" class="GS">Наши услуги</a> <a href="Index.html" class="GS">Стоимость</a> <a href="Index.html" class="GS">Примеры работ</a> <a href="Index.html" class="GS">Контакты</a> </div> <a href="https://vk.com/pasting"><div id="vkPas"></div></a> <div class="example_shown"><div class="example_hidden">+375(29)333 92 94</div></div> <ul id="my_slider"> <li><img src="data_images/1.jpg" alt="" /></li> <li><img src="data_images/2.jpg" alt="" /></li> <li><img src="data_images/3.jpg" alt="" /></li> </ul> <div id="PodvalPas">©2014 «Pas» - Минск</div> </div> </body> </html> Код HTML:
body { margin: 0px; background-color:#fff; } .GlBlockPas { position: relative; height: auto; width: 1200px; background-color: #FFFFFF; margin-left: auto; margin-right: auto; } #LogoPas { height: 77px; width: 232px; margin: 25px 0px 0px 40px; background-image: url(img/logo_pas.png); background-size: 100% 100%; /*background-color: #999999;*/ float: left; } #MenuPas { height: 24px; width: 698px; margin: 67px 0px 0px 0px; float: left; font: normal 15px Tahoma; text-decoration: none; text-align : right; color: #4C4C4C; /*background-color: #EEEEEE;*/ } #vkPas { height: 35px; width: 35px; margin: 67px 0px 0px 116px; float: left; background-image: url(img/vk.png); background-size: 100% 100%; } a.GS { text-decoration: none; color: #5B5B5B; margin: 0px 0px 0px 40px; } a:hover.GS { border-bottom: 1px dotted blue; color: #008DD2; } .example_shown { display:block; height: 35px; width: 35px; margin: 67px 0px 0px 5px; float: left; background-image: url(img/phone.png); background-size: 100% 100%; } .example_hidden { display:none; } .example_shown:hover .example_hidden { display:block; height: 200px; width: 200px; margin: 60px 0px 0px 48px; float: right; background-color: #808080; background-size: 100% 100%; opacity: 1; } #PodvalPas { height: 20px; width: 1120px; margin: 25px 0px 0px 40px; float: left; font: normal 12px Tahoma; color: #5B5B5B; /*border: 1px solid #DEDEDE;*/ text-align: center; } Код HTML:
#my_slider { width:1120px; height:420px; overflow: hidden; position:relative; list-style: none outside none; padding:0; margin: 25px 0px 0px 40px; border: 1px solid #DEDEDE; float: left; } #my_slider li { position: absolute; top: 0px; left: 0px; display:none; } #my_slider li:first-child { display:block; } Код HTML:
(function($){ $.fn.MySlider = function(interval) { var slides; // var cnt; var amount; var i; function run() { // hiding previous image and showing next $(slides[i]).fadeOut(1000); i++; if (i >= amount) i = 0; $(slides[i]).fadeIn(1000); // updating counter // cnt.text(i+1+' / '+amount); // loop setTimeout(run, interval); } slides = $('#my_slider').children(); // cnt = $('#counter'); amount = slides.length; i=0; // updating counter // cnt.text(i+1+' / '+amount); setTimeout(run, interval); }; })(jQuery); // custom initialization jQuery(window).load(function() { $('.smart_gallery').MySlider(7000); }); |
|
16.12.2014, 17:43 | #4 |
Форумчанин
Регистрация: 30.05.2011
Сообщений: 651
|
Не вижу, где у вас стоит z-index. Также, у блока меню должна быть позиция absolute или relative. И у блока слайдера тоже. Тогда z-index будет работать корректно. Статичная позиция у блоков обычно не прусматривает z-позиционирование
Создание, программирование и сопровождение сайтов любой сложности.
Изготовление программ на заказ. Список услуг и портфолио на сайте www.andreygrom.ru |
16.12.2014, 17:46 | #5 |
Форумчанин
Регистрация: 30.05.2011
Сообщений: 651
|
У слайдера тоже должен быть установлен z-indez. От нуля и более
Создание, программирование и сопровождение сайтов любой сложности.
Изготовление программ на заказ. Список услуг и портфолио на сайте www.andreygrom.ru |
16.12.2014, 18:07 | #6 |
Пользователь
Регистрация: 26.05.2008
Сообщений: 30
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Слайдер перекрывает выпадающее меню!( | Лисенок1 | HTML и CSS | 5 | 11.08.2014 22:14 |
Не работает всплывающее меню на сайте | Arina96 | HTML и CSS | 1 | 19.11.2013 11:55 |
contextMenuStrip и ListView, всплывающее меню с условием | Casper-SC | Общие вопросы .NET | 0 | 31.03.2010 02:43 |
переделать всплывающее меню в раскрывающееся на JavaScript | netweb | JavaScript, Ajax | 0 | 15.01.2010 09:36 |
переробить всплывающее меню в раскрывающееся на JavaScript | netweb | JavaScript, Ajax | 3 | 14.01.2010 14:20 |