Всплывающее меню и слайдер - HTML и CSS

Sergeevich · 16.12.2014, 15:53

У меня возникла проблема, сделал всплывающее меню, и слайдер, но никакой 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>

css-код:

Код 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;
}

Заранее спасибо за помощь.

grominfo · 16.12.2014, 16:50

Цитата:

но никакой z-index не помогает отобразить меню поверх слайдера.

Обычно z-index устанавливается в скрипте слайдера

Управление слоями осуществляется только через z-index. Если не помогает, значит где-то стили просто перекрываются

Sergeevich · 16.12.2014, 17:12

Цитата:

Сообщение от grominfo

Обычно z-index устанавливается в скрипте слайдера

Управление слоями осуществляется только через z-index. Если не помогает, значит где-то стили просто перекрываются

Попробовал найти в скрипте, ничего не ходит :-(

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">&copy;2014 &laquo;Pas&raquo; - Минск</div>

</div>

</body>
</html>

styles.CSS:

Код 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;
}

main.CSS:

Код 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;

}

main.js:

Код 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);
});

Есть еще один файл на .js, я в поиске index набирал, не было, плюс там не отформатированный код, все в одну строку и очень много, поэтому сюда его уже не выкладываю. Если есть время просмотреть код, и найти ту самую не достающую или лишнюю часть, которая мешает мне решить проблему, буду очень благодарен. Спасибо.

grominfo · 16.12.2014, 17:43

Не вижу, где у вас стоит z-index. Также, у блока меню должна быть позиция absolute или relative. И у блока слайдера тоже. Тогда z-index будет работать корректно. Статичная позиция у блоков обычно не прусматривает z-позиционирование

grominfo · 16.12.2014, 17:46

У слайдера тоже должен быть установлен z-indez. От нуля и более

Sergeevich · 16.12.2014, 18:07

Цитата:

Сообщение от grominfo

У слайдера тоже должен быть установлен z-indez. От нуля и более

Большое спасибо, сейчас попробую всё поменять.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Слайдер перекрывает выпадающее меню!(	Лисенок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

16.12.2014, 17:43	#4
grominfo Форумчанин Регистрация: 30.05.2011 Сообщений: 651	Не вижу, где у вас стоит z-index. Также, у блока меню должна быть позиция absolute или relative. И у блока слайдера тоже. Тогда z-index будет работать корректно. Статичная позиция у блоков обычно не прусматривает z-позиционирование Создание, программирование и сопровождение сайтов любой сложности. Изготовление программ на заказ. Список услуг и портфолио на сайте www.andreygrom.ru

16.12.2014, 17:46	#5
grominfo Форумчанин Регистрация: 30.05.2011 Сообщений: 651	У слайдера тоже должен быть установлен z-indez. От нуля и более Создание, программирование и сопровождение сайтов любой сложности. Изготовление программ на заказ. Список услуг и портфолио на сайте www.andreygrom.ru