АРМАДА
Как сделать выпадающее меню? (код есть)
На страницу Пред.  1, 2
Новая тема Написать ответ Advanced Hosters - профессиональный хостинг
Сб Апр 16, 2011 6:46 pm Start Post: Как сделать выпадающее меню? (код есть) 

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Вс Апр 17, 2011 6:39 amОтветить с цитатой
Люди, помогите Shout bums
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

pixel
Профессионал
Зарегистрирован: 10.08.2008
Сообщений: 626
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Вс Апр 17, 2011 11:28 amОтветить с цитатой
http://vremenno.net/html-css/css-drop-down-menu/

Ссылки поменять на свои думаю не проблема.

pixel
Профессионал
Зарегистрирован: 10.08.2008
Сообщений: 626
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Вс Апр 17, 2011 1:18 pmОтветить с цитатой
Вот, сегодня кстати на одном форуме спросили.

Код:
<!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
Обратиться по нику
# Добавлено:Вс Апр 17, 2011 1:29 pmОтветить с цитатой
Yabuti, в ЛС написал)
Тебе там надо только CSS подкрутить)
Да, и там по клику, но можно на hover переделать
Правильно вкладываем свободные средства в ПАММ
Правильный хостинг: DigitalOcean

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Вс Апр 17, 2011 1:49 pmОтветить с цитатой
deBrain, отписал, попробовал, но не хочет он показывать bums :`(
За помощь спасибо Drinks or Beer :thup:
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

deBrain
V.I.P.
Зарегистрирован: 03.06.2010
Сообщений: 1569
Обратиться по нику
# Добавлено:Вс Апр 17, 2011 1:50 pmОтветить с цитатой
Yabuti, новую библиотеку jq не пробовал подключать?
http://docs.jquery.com/Downloading_jQuery
Правильно вкладываем свободные средства в ПАММ
Правильный хостинг: DigitalOcean

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Пн Апр 18, 2011 1:43 pmОтветить с цитатой
Уф, блин, сделал!
Хорошо на нулледе акк есть, темы кодерские читать, а то так бы и не нашел.

Кто тоже будет сталкиваться - вот решение:
Вставить между <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>



пользуйтесь Smile
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Пн Апр 18, 2011 1:45 pmОтветить с цитатой
deBrain, не, не рискнул, т.к. там в шаблоне все подкручено-подстроено, с новым билдом хз, будет ли работать.
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Вт Апр 19, 2011 5:45 pmОтветить с цитатой
По этому сайту другая трабла теперь!
Блиииин, люди, кто с 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 на всех блоках подряд.

С меня много-много репутации в карму! Drinks or Beer :thup:
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

pixel
Профессионал
Зарегистрирован: 10.08.2008
Сообщений: 626
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Вт Апр 19, 2011 6:12 pmОтветить с цитатой
Как-то напряжно в кусочках кода ковыряться. Пропиши к примеру

Код:
border: 3px solid red;



это рамка вокруг объекта

и смотри что и куда двигается, там и поймешь

margin-top - внешний отступ сверху

pixel
Профессионал
Зарегистрирован: 10.08.2008
Сообщений: 626
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Вт Апр 19, 2011 6:15 pmОтветить с цитатой
Ну или можешь выложить скриншот и отметить что не получается, и что должно быть. Потом можно будет глянуть.

Matroskin
Свой
Зарегистрирован: 18.10.2010
Сообщений: 20
Обратиться по нику
# Добавлено:Вт Апр 19, 2011 7:21 pmОтветить с цитатой
попробуй еще код
Код:

/*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
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Вт Апр 19, 2011 7:54 pmОтветить с цитатой
Ура! получилось! Yahoo!
Выделил модуль .row-slider бордером, а потом его начал двигать - ему и нужно было указать высоту.
Круть Yahoo! :thup: Drinks or Beer
Спасибо, pixel, Matroskin, Drinks or Beer
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--
Новая тема Написать ответ    ГЛАВНАЯ ~ ТЕХНИЧЕСКИЕ ВОПРОСЫ

Перейти:  





Генеральный спонсор



Партнеры