X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Перекрытие меню
choppylion
choppylion
Topic Starter сообщение 25.2.2011, 17:56; Ответить: choppylion
Сообщение #1


Во время верстки сайты вышла проблема: при открытии какого-либо меню, то нижние меню его перекрывают.
как можно решить данную проблему? судя по всему проблема кроется в CSS и JS. заранее спасибо

вот скриншоты:
[img]http://cs4688.vkontakte.ru/u6875632/112601150/z_cef74bec.jpg[/img]
[img]http://cs4688.vkontakte.ru/u6875632/112601150/z_9149a2ea.jpg[/img]

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

JS

[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)
});[/JS]

CSS

[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;
}[/CSS]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ottaviano
ottaviano
сообщение 25.2.2011, 18:07; Ответить: ottaviano
Сообщение #2


choppylion, практически наугад:
.tzSelect .dropDown --> z-index:1000;
.tzSelect --> z-index:10;
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
choppylion
choppylion
Topic Starter сообщение 25.2.2011, 18:18; Ответить: choppylion
Сообщение #3


огромнейшее спасибо за вашу помощь)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
1 Викторио_mw 1467 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
2 boltuk 3411 4.12.2017, 14:44
автор: tezoro
Открытая тема (нет новых ответов) Помогите с меню - переделать в выпадающее
1 lepota 1130 4.12.2017, 13:29
автор: yury_mw
Открытая тема (нет новых ответов) Слайдер под меню
0 Olya_Poy 4645 29.11.2017, 11:09
автор: -garmoni-
Открытая тема (нет новых ответов) На разных разрешениях меню выглядит по разному
0 SPiar 4817 28.9.2017, 17:45
автор: -korotkov-


 



RSS Текстовая версия Сейчас: 20.4.2024, 19:50
Дизайн