Jump to content
  • 0

Перекрытие меню


choppylion
 Share

Question

Во время верстки сайты вышла проблема: при открытии какого-либо меню, то нижние меню его перекрывают.

как можно решить данную проблему? судя по всему проблема кроется в CSS и JS. заранее спасибо

вот скриншоты:

z_cef74bec.jpg

z_9149a2ea.jpg

Также прикрепляю JS и CSS-файлы:

JS

function lalala(x){

// Сверху элемент select, который будет замещаться:

var selectBoxContainer = $('<div>',{

width : x.outerWidth(),

className : 'tzSelect',

html : '<div class="selectBox"></div>'

});

var dropDown = $('<ul>',{className:'dropDown'});

var selectBox = selectBoxContainer.find('.selectBox');

// Цикл по оригинальному элементу select

x.find('option').each(function(i){

var option = $(this);

if(i==x.attr('selectedIndex')){

selectBox.html(option.text());

}

// Так как используется jQuery 1.4.3, то мы можем получить доступ

// к атрибутам данных HTML5 с помощью метода data().

if(option.data('skip')){

return true;

}

// Создаем выпадающий пункт в соответствии

// с иконкой данных и атрибутами HTML5 данных:

var li = $('<li>',{

html: '<img src="'+option.data('icon')+'" /><span>'+

option.data('html-text')+'</span>'

});

li.click(function(){

selectBox.html(option.text());

dropDown.trigger('hide');

// Когда происходит событие click, мы также отражаем

// изменения в оригинальном элементе select:

x.val(option.val());

return false;

});

dropDown.append(li);

});

selectBoxContainer.append(dropDown.hide());

x.hide().after(selectBoxContainer);

// Привязываем пользовательские события show и hide к элементу dropDown:

dropDown.bind('show',function(){

if(dropDown.is(':animated')){

return false;

}

selectBox.addClass('expanded');

dropDown.slideDown();

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

if(dropDown.is(':animated')){

return false;

}

selectBox.removeClass('expanded');

dropDown.slideUp();

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

if(selectBox.hasClass('expanded')){

dropDown.trigger('hide');

}

else dropDown.trigger('show');

});

selectBox.click(function(){

dropDown.trigger('toggle');

return false;

});

// Если нажать кнопку мыши где-нибудь на странице при открытом элементе dropDown,

// он будет спрятан:

$(document).click(function(){

dropDown.trigger('hide');

});

}

$(document).ready(function(){

var select = $('select.makeMeFancy1');

lalala(select)

var select = $('select.makeMeFancy2');

lalala(select)

var select = $('select.makeMeFancy3');

lalala(select)

});

CSS

*{

margin:0;

padding:0;

}

body{

color:#eee;

background-color:#141414;

font:15px Calibri,Arial,sans-serif;

}

#page{

width:490px;

margin:50px auto;

}

#page h1{

font-weight:normal;

text-indent:-99999px;

overflow:hidden;

background:url('../img/your_product.png') no-repeat;

width:490px;

height:36px;

}

#page form{

margin:20px auto;

width:460px;

}

.tzSelect{

/* Контейнер для нового элемента select */

height:34px;

display:inline-block;

min-width:460px;

position:relative;

/* Предварительная загрузка фонового изображения для выпадающих пунктов */

background:url("../img/dropdown_slice.png") no-repeat -99999px;

}

.tzSelect .selectBox{

position:absolute;

height:100%;

width:100%;

/* Установка шрифта */

font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif;

text-align:center;

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

color:#666666;

/* Использование множественных фонов CSS3 */

background:url('../img/select_slice.png') repeat-x #ddd;

background-image:url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png');

background-position:0 -136px, right -204px, 50% -68px, 0 0;

background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;

cursor:pointer;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

}

.tzSelect .selectBox:hover,

.tzSelect .selectBox.expanded{

background-position:0 -170px, right -238px, 50% -102px, 0 -34px;

color:#2c5667;

text-shadow:1px 1px 0 #9bc2d0;

}

.tzSelect .dropDown{

position:absolute;

top:40px;

left:0;

width:100%;

border:1px solid #32333b;

border-width:0 1px 1px;

list-style:none;

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

box-sizing:border-box;

-moz-box-shadow:0 0 4px #111;

-webkit-box-shadow:0 0 4px #111;

box-shadow:0 0 4px #111;

}

.tzSelect li{

height:85px;

cursor:pointer;

position:relative;

/* Использование множественных фонов CSS3 */

background:url('../img/dropdown_slice.png') repeat-x #222;

background-image:url('../img/dropdown_slice.png'),url('../img/dropdown_slice.png'),url('../img/dropdown_slice.png');

background-position: 50% -171px, 0 -85px, 0 0;

background-repeat: no-repeat, no-repeat, repeat-x;

}

.tzSelect li:hover{

background-position: 50% -256px, 0 -85px, 0 0;

}

.tzSelect li span{

left:88px;

position:absolute;

top:27px;

}

.tzSelect li i{

color:#999999;

display:block;

font-size:12px;

}

.tzSelect li img{

left:9px;

position:absolute;

top:13px;

}

/* Стили страницы */

#footer{

background-color:#212121;

position:fixed;

width:100%;

height:50px;

bottom:0;

left:0;

}

.tri{

border-color:transparent transparent #212121;

border-style:solid;

border-width:20px 17px;

height:0;

left:50%;

margin:-40px 0 0 -400px;

position:absolute;

top:0;

width:0;

}

#footer h1{

font-size:40px;

font-weight:normal;

left:50%;

margin-left:-400px;

padding:4px 0;

position:absolute;

width:600px;

}

a, a:visited {

text-decoration:none;

outline:none;

border-bottom:1px dotted #97cae6;

color:#97cae6;

}

a:hover{

border-bottom:1px dashed transparent;

}

.clear{

clear:both;

}

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy