На страницу Пред. 1, 2 |
|
Сб Апр 16, 2011 6:46 pm |
Start Post: Как сделать выпадающее меню? (код есть) |
Yabuti V.I.P. |
Зарегистрирован: 28.11.2008
Сообщений: 16263
|
Обратиться по нику
|
Yabuti |
Ответить с цитатой | | |
|
Всем привет!
тут такая проблема, хз как решить, ломаю голову
Есть меню (выводится через модуль меню Джумлы):
Код: |
<div class="clear custom-wrapper-center">
<div class="boxIndent">
<ul class="menu">
<li class="item20"><a href="/index.php/catalogue"><span>Каталог продукции</span></a></li>
<li class="item21"><a href="#"><span>Контакты</span></a>
<div style="display: none;" class="ulwrapper">
<ul>
<li class="item22"><a href="/index.php/contacts/map"><span>Посмотреть на карте</span></a></li>
<li class="item24"><a href="/index.php/contacts/form"><span>Форма обратной связи</span></a></li>
<li class="item23"><a href="/index.php/contacts/contacts"><span>Контактная информация</span></a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
|
Есть к нему CSS (здоровый, но где-то здесь этот класс ulwrapper):
Код: |
.ulwrapper {
display: none;
position:absolute;
background:url(../images/menu_wra.png) 0 0 no-repeat;
padding:8px 0 0 0;
margin:37px 0 0 0px !important;
*margin:37px 0 0 -99px !important;
width:152px !important;
height:300px !important;
}
.ulwrapper ul { margin:0 !important; display: inline-block; width:151px; //display:block; //zoom:1; background:url(../images/menu_wrb.png) bottom left no-repeat; padding:0 0 12px 0; list-style:none;}
.parent .ulwrapper ul li, .parent .ulwrapper ul li a, .parent .ulwrapper ul li a span{
float:none !important;
width:auto !important;
display:inline-block;
background:none !important;
font-size:12px !important;
color:#363636!important;
margin:0 !important;
*margin:0 0 -5px 0 !important;
text-align:left;
text-decoration:none;
line-height:18px !important;
padding:0 !important;
}
.ulwrapper .ulwrapper {
display: none;
position:absolute;
padding:8px 0 0 0;
margin:-40px 0 0 152px !important;
*margin:-5px 0 0 87px !important;
background:none;
}
.ulwrapper .ulwrapper .ulwrapper {
display: none;
position:absolute;
padding:0 0 0 0;
}
.row-top-menu .ulwrapper ul li{ margin:0 !important; padding:0 !important; min-height:1px; display:block; background:url(../images/menu_wrc.png) 0 0 repeat !important;}
.row-top-menu .ulwrapper ul li a{text-transform:capitalize !important; color:#ADBE6F!important; margin:0 !important; padding:0 !important; font-size:12px;}
.row-top-menu .ulwrapper ul li a span{ display:block; color:#ADBE6F!important; width:128px !important; padding:7px 4px 7px 19px !important; *padding:4px 4px 4px 19px !important; background:url(../images/menu_wrd.png) bottom left repeat-x !important; font-size:12px;}
.row-top-menu .ulwrapper ul li a:hover, .row-top-menu .ulwrapper > ul > li#current > a , .row-top-menu .ulwrapper ul li#current a strong, .row-top-menu .ulwrapper > ul > li#current > a > span{ color:#FFF !important;}
.row-top-menu .ulwrapper ul li a:hover span{ color:#FFF !important;}
|
Нужно, чтобы при наведении на пункт, если есть подпункты - они показывались (вниз списком или сбоку).
Подскажите, где здесь подправить, чтобы подпункты показывались, ведь в коде страницы они есть, просто не отображаются!
Заранее спасибо и +++ в репутацию |
|
|
|
|
|
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
-- |
Yabuti V.I.P. |
Зарегистрирован: 28.11.2008
Сообщений: 16263
|
Обратиться по нику
|
|
|
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
-- |
pixel Профессионал |
Зарегистрирован: 10.08.2008
Сообщений: 626
|
Обратиться по нику
|
|
|
|
pixel Профессионал |
Зарегистрирован: 10.08.2008
Сообщений: 626
|
Обратиться по нику
|
pixel |
Ответить с цитатой | | |
|
Вот, сегодня кстати на одном форуме спросили.
Код: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
body{min-width:1000px;}
ul{
height:47px;
padding:0 20px;
background:url(m-bg.jpg) left top repeat-x;
border:1px solid #6b9b07;
background:#94c74e;
}
ul li:hover .drop,ul li.hover .drop{display:block;width:300px;}
ul li{
float:left;
width:14%;
position:relative;
height:45px;
display:table-cell;
vertical-align:middle;
padding:1px 1px;
top:-1px;
_behavior:url("csshover.htc")
}
ul li a{
font-size:15px;
color:#fff;
background:url(arrow.gif) no-repeat 10px 50%;
vertical-align:middle;
display:table-cell;
height:42px;
padding-left:30px;
}
ul li:hover{
background:url(m-bg.jpg) repeat-x 0 -48px;
border:1px solid #b1770b;
height:45px;
padding:0px 0px 1px;
}
ul .drop{
display:none;
position:absolute;
z-index:1;
width:305px;
overflow:hidden;
}
ul ul{
left:0;
top:49px;
overflow:hidden;
background:#94c74e;
border:1px solid #6fa204;
border-width:0 1px 1px;
height:auto;
}
ul ul li{float:none;text-align:left;width:300px;padding:0 10px;background:none;display:block;}
ul ul a{padding:0;padding-left:15px;}
iframe{
position:absolute;
top:0px;
left:0px;
z-index:-1;
width:3000px;
height:3000px;
filter:mask();
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
ul li{width:13.8%;display:inline;zoom:1;}
ul li a{zoom:1;position:relative;padding-left:30px;width:70%;display:block;background:url(arrow.
gif) no-repeat 10px 50%;}
ul li a span{position:absolute;top:50%;}
ul li a span span{position:relative;top:-50%;}
</style>
<![endif]-->
</head>
<body>
<div>
<ul>
<li><a href="#"><span><span>Детские коляски</span></span></a></li>
<li><a href="#"><span><span>Детская мебель</span></span></a>
<div class="drop">
<ul>
<li><a href="#">Детские кроватки</a></li>
<li><a href="#">Детские комнаты</a></li>
<li><a href="#">Дуэты (кровать+комод)</a></li>
<li><a href="#">Кроватки-трансформеры</a></li>
<li><a href="#">Комод-пеленатор(с ванночкой иеленальным столиком)</a></li>
<li><a href="#">Комоды</a></li>
<li><a href="#">Шкафы</a></li>
<li><a href="#">Игровые манежи</a></li>
<li><a href="#">Манежи-кроватки</a></li>
<li><a href="#">Пеленальные столики с Ванночкой</a></li>
<li><a href="#">Люльки</a></li>
<li><a href="#">Люльки - переноски</a></li>
</ul>
<!--[if lt IE 7]><iframe></iframe><![endif]-->
</div>
</li>
<li><a href="#"><span><span>Автокресла</span><
/span></a></li>
<li><a href="#"><span><span>Постельные пренадлежности</span></span></a></li>
<li><a href="#"><span><span>Мамочкам в помощь</span></span></a></li>
<li><a href="#"><span><span>Детский транспорт</span></span></a></li>
<li><a href="#"><span><span>Для купания и гигиены</span></span></a></li>
</ul>
<form action="#">
<select class="brand"><option>Выберите производителя</option></select>
<select class="brand"><option>Выберите производителя</option></select>
<select class="brand"><option>Выберите производителя</option></select>
<select class="brand"><option>Выберите производителя</option></select>
</form>
</div>
</body>
</html>
|
|
|
|
|
|
|
|
deBrain V.I.P. |
Зарегистрирован: 03.06.2010
Сообщений: 1569
|
Обратиться по нику
|
deBrain |
Ответить с цитатой | | |
|
Yabuti, в ЛС написал)
Тебе там надо только CSS подкрутить)
Да, и там по клику, но можно на hover переделать |
|
|
|
|
|
Правильно вкладываем свободные средства в ПАММ
Правильный хостинг: DigitalOcean
|
Yabuti V.I.P. |
Зарегистрирован: 28.11.2008
Сообщений: 16263
|
Обратиться по нику
|
Yabuti |
Ответить с цитатой | | |
|
deBrain, отписал, попробовал, но не хочет он показывать
За помощь спасибо |
|
|
|
|
|
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
-- |
deBrain V.I.P. |
Зарегистрирован: 03.06.2010
Сообщений: 1569
|
Обратиться по нику
|
|
|
Правильно вкладываем свободные средства в ПАММ
Правильный хостинг: DigitalOcean
|
Yabuti V.I.P. |
Зарегистрирован: 28.11.2008
Сообщений: 16263
|
Обратиться по нику
|
Yabuti |
Ответить с цитатой | | |
|
Уф, блин, сделал!
Хорошо на нулледе акк есть, темы кодерские читать, а то так бы и не нашел.
Кто тоже будет сталкиваться - вот решение:
Вставить между <head> </head>:
Код: |
<script type="text/javascript">
var statys = 'block';statys1 = 'block';
function displayBlock(secondId){
document.getElementById(secondId).style.display = statys;
if(statys == 'block'){
statys = 'none';
} else {
statys = 'block';
}
}
function displayBlock2(secondId){
document.getElementById(secondId).style.display = statys1;
if(statys1 == 'block'){
statys1 = 'none';
} else {
statys1 = 'block';
}
}
</script>
|
или в отдельный файл и вместо кода указать так:
<script type="text/javascript" src="путь_к файлу/имя.js"></script>
Где будет меню (или произвольный модуль в позиции, где будет меню - для Джумлы) вставить:
Код: |
<a href="#" onclick="displayBlock('frag1');return false;">пункт1</a><br>
<div id="frag1" style="display:none;"><p>
подпункт1<br>
подпункт2<br>
</p></div>
<a href="#" onclick="displayBlock2('frag2');return false;">пункт2</a><br>
<div id="frag2" style="display:none;"><p>
подпункт1<br>
подпункт2<br>
</p></div>
<a href="#" onclick="displayBlock2('frag3');return false;">пункт3</a><br>
<div id="frag3" style="display:none;"><p>
подпункт1<br>
подпункт2<br>
</p></div>
|
пользуйтесь |
|
|
|
|
|
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
-- |
Yabuti V.I.P. |
Зарегистрирован: 28.11.2008
Сообщений: 16263
|
Обратиться по нику
|
Yabuti |
Ответить с цитатой | | |
|
deBrain, не, не рискнул, т.к. там в шаблоне все подкручено-подстроено, с новым билдом хз, будет ли работать. |
|
|
|
|
|
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
-- |
Yabuti V.I.P. |
Зарегистрирован: 28.11.2008
Сообщений: 16263
|
Обратиться по нику
|
Yabuti |
Ответить с цитатой | | |
|
По этому сайту другая трабла теперь!
Блиииин, люди, кто с CSS дружит, помогите решить проблему.
Заказчик хочет, чтобы я ужал верхний блок со слайдом (этот же сайт, vegetables.kz).
Я один раз уже ужимал, в CSS ковырялся, как-то блок ниже (контента) приподнял. А сегодня он еще попросил ужать - и не получается!
Вот в index.php код, который отвечает за вывод слайда:
Код: |
<div class="row-slider">
<div style="margin-top:12px;margin-right:1px;">
<jdoc:include type="modules" name="user2" />
</div>
</div>
|
А вот этот код в теле страницы выводит слайд (модуль произвольный код, сделал на каждой странице свой слайд):
Код: |
<div class="moduletable">
<div class="row-slider">
<div style="margin-top:12px;margin-right:1px;">
<p style="text-align: center;"><img src="/images/stories/homepage.jpg" border="0" /></p>
</div>
</div>
</div>
|
А вот весь CSS: http://vegetables.kz/templates/agrocom/css/template.css
Кто понимает в версте, подскажите, где править margin или размеры блоков менять, больше 3-х часов уже сижу и методом научного тыка меняю margin-top на всех блоках подряд.
С меня много-много репутации в карму! |
|
|
|
|
|
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
-- |
pixel Профессионал |
Зарегистрирован: 10.08.2008
Сообщений: 626
|
Обратиться по нику
|
pixel |
Ответить с цитатой | | |
|
Как-то напряжно в кусочках кода ковыряться. Пропиши к примеру
Код: |
border: 3px solid red;
|
это рамка вокруг объекта
и смотри что и куда двигается, там и поймешь
margin-top - внешний отступ сверху |
|
|
|
|
|
|
pixel Профессионал |
Зарегистрирован: 10.08.2008
Сообщений: 626
|
Обратиться по нику
|
pixel |
Ответить с цитатой | | |
|
Ну или можешь выложить скриншот и отметить что не получается, и что должно быть. Потом можно будет глянуть. |
|
|
|
|
|
|
Matroskin Свой |
Зарегистрирован: 18.10.2010
Сообщений: 20
|
Обратиться по нику
|
Matroskin |
Ответить с цитатой | | |
|
попробуй еще код
Код: |
/*slider-top*/
.row-slider ul.pagination { list-style:none; padding:0; margin:264px 0 0 675px; position:absolute;}
.row-slider ul.pagination li { float:left; }
.row-slider ul.pagination li.current a { background:url(../images/slider_l.png) 0 0 no-repeat;}
.row-slider #faded { width:939px; margin:0 0 0 0px; height:290px; overflow:hidden; position:relative}
.row-slider #faded ul{ margin:0 0 0 0; position:absolute; list-style:none; z-index:11;}
.row-slider a { outline:0; border:0; }
.row-slider ul.pagination{ position:absolute; margin:268px 0 0 835px !important;}
.row-slider ul.pagination li{ margin:0 2px 0 0 !important; padding:0 !important;}
.row-slider ul.pagination li a{ text-indent:-1999px; display:block; float:right; width:14px; height:13px; background:url(../images/slider_m.png) 0 0 no-repeat;}
.row-slider ul.pagination li a:hover{background:url(../images/slider_l.png) 0 0 no-repeat;}
|
заменить на (везде height уменьшен на 100)
Код: |
/*slider-top*/
.row-slider ul.pagination { list-style:none; padding:0; margin:164px 0 0 675px; position:absolute;}
.row-slider ul.pagination li { float:left; }
.row-slider ul.pagination li.current a { background:url(../images/slider_l.png) 0 0 no-repeat;}
.row-slider #faded { width:939px; margin:0 0 0 0px; height:190px; overflow:hidden; position:relative}
.row-slider #faded ul{ margin:0 0 0 0; position:absolute; list-style:none; z-index:11;}
.row-slider a { outline:0; border:0; }
.row-slider ul.pagination{ position:absolute; margin:168px 0 0 835px !important;}
.row-slider ul.pagination li{ margin:0 2px 0 0 !important; padding:0 !important;}
.row-slider ul.pagination li a{ text-indent:-1999px; display:block; float:right; width:14px; height:13px; background:url(../images/slider_m.png) 0 0 no-repeat;}
.row-slider ul.pagination li a:hover{background:url(../images/slider_l.png) 0 0 no-repeat;}
|
+ надо уменьшить высоту самих изображений (с тракторами, картошкой и полями) |
|
|
|
|
|
|
Yabuti V.I.P. |
Зарегистрирован: 28.11.2008
Сообщений: 16263
|
Обратиться по нику
|
Yabuti |
Ответить с цитатой | | |
|
Ура! получилось!
Выделил модуль .row-slider бордером, а потом его начал двигать - ему и нужно было указать высоту.
Круть
Спасибо, pixel, Matroskin, |
|
|
|
|
|
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
-- |
|