Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Горизонтальное выпадающее меню, Горизонтальное выпадающее меню 
:(
    Опции темы
LeeFORT
Дата 4.1.2015, 01:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 22.9.2007

Репутация: нет
Всего: нет
Всем привет.
Скажу не скрывая: - я любитель игры "Мир танков".
Задумал сделать сайт для клана в котором состою.

Так вот дилемма.
Меню, что верхнее, что нижнее.
Ну никак не идёт.
Первое я ещё более или менее сделал, но вот второе никак.

И так....
Вот код: (В принципе помогли довести до ума) надеюсь кому-нибудь пригодится
Код

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-menu {
    overflow: hidden;
    background: url(bg-menu.gif) repeat-x #000;
}

.header-menu li {
    position: relative;
    float: left;
}
.header-menu li:hover {

    background: url(b-portal-menu.png) repeat-x 0 0;
}

.header-menu > li > a {
    display: block;
    padding: 12px 36px;
    border-left: 1px solid #353538;
    border-right: 1px solid #161618;
    color: #fff;
    text-decoration: none;
}
.header-menu > li > a:hover {
    border-left-color: #923C26;
}

.header-menu .arrow-drop-down {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 50px;
    background: url(b-portal-menu.png) no-repeat 0 -264px;
}

.header-menu .active, .header-menu .active:hover {
    background: url(b-portal-menu.png) repeat-x 0 -44px;
}
.header-menu .arrow-drop-down:hover {
    background: url(b-portal-menu.png) no-repeat 0 -352px;
}


Код

<!DOCTYPE html>
<html>
<head lang="ru">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>MENU</title>

    <link rel="stylesheet" href="main.css">
</head>
<body>
    <ul class="header-menu" >
        <li class="active" >
            <a href="#">Главная</a>
        </li>
        <li>
            <a href="#">Скачать</a>
            <span class="arrow-drop-down" >&nbsp;</span>
        </li>
        <li>
            <a href="#">Литература</a>
            <span class="arrow-drop-down" >&nbsp;</span>
        </li>
        <li>
            <a href="#">Об игре</a>
        </li>
    </ul>
</body>
</html>


Единственно я не могу доделать выпадающий список.

Леплю как говориться из 2 в 1.
Тот состоит на JavaScript
<script type="text/javascript" src="jquery.js"></script>
Код


$(document).ready(function(){
 
    $("ul.subnav").parent().append("<span></span>"); 
    
    $("ul.topnav li span").click(function() {
        
        $(this).parent().find("ul.subnav").slideDown('fast').show(); 
 
        $(this).parent().hover(function() {
        }, function(){    
            $(this).parent().find("ul.subnav").slideUp('slow'); 
        });
 
        }).hover(function() { 
            $(this).addClass("subhover"); 
            
            $(this).removeClass("subhover"); 
    });
 
});


Пытаюсь сделать так:
Код

     <ul class="header-menu">
            <li class="active" ><a href="#">ГЛАВНАЯ</a></li>
         <li><a href="/">ФОРУМ</a></li>
         <li><a href="/">НОВОСТИ</a></li>
         <li><a href="/">ТУРНИРЫ</a></li>
            <li><a href="#">СКАЧАТЬ</a>
            <span class="arrow-drop-down" >&nbsp;</span>
                <ul class="subnav"> <--- ВОТ ТАК ПРОПИСАВ
                    <li><a href="#">Скачать игру</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">AJAX</a></li>
                    <li><a href="#">Другое...</a></li>
                </ul>
        </li>
         <li><a href="/twitch.html">СТРИМЫ</a></li>
         <li><a href="/">СТАТИСТИКА</a></li>
         <li><a href="/">КОМЕНТАРИЙ</a></li>
         <li><a href="/">КОМАНДА</a></li>
         <li><a href="/index.php?do=feedback">ОБРАТНАЯ СВЯЗЬ</a></li>
        </ul>


Но не получается, значит нужно css.

Окей.

Вставляю CSS где есть "subnav"
Код

ul.topnav li ul.subnav {
    list-style: none;
    position: absolute;
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display: none; <-- Тут же указывается на то, что бы скрыть SUBNAV, а остальное я уберу. 
    float: left;
    width: 170px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border: 1px solid #111;
}
ul.topnav li ul.subnav li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525;
    border-bottom: 1px solid #444;
    clear: both;
    width: 170px;
}
html ul.topnav li ul.subnav li a {
    float: left;
    width: 145px;
    padding-left: 20px;
}


Так ничего не выходит. Помогите, пожалуйста. 
PM MAIL   Вверх
Gold Dragon
Дата 7.1.2015, 10:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71
Цитата(LeeFORT @  4.1.2015,  02:04 Найти цитируемый пост)
Меню, что верхнее, что нижнее.
Ну никак не идёт.
Первое я ещё более или менее сделал, но вот второе никак.
забыл самое главное... А что именно то не идёт? Что должно быть то?  smile

Добавлено через 3 минуты и 7 секунд
ну или хотябы весь код дал для скачки...


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
sQu1rr
Дата 7.1.2015, 15:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: нет
Всего: 13
Цитата(Gold Dragon @  7.1.2015,  07:12 Найти цитируемый пост)
ну или хотябы весь код дал для скачки... 

Ну или на jsfiddle что гораздо удобнее для всех (особенно, не буду врать, для меня)

Ну и попытайтесь, да, объяснить как это должно в итоге выглядить
PM MAIL Skype GTalk   Вверх
LeeFORT
Дата 8.1.2015, 16:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 22.9.2007

Репутация: нет
Всего: нет
Gold Dragon, Не могу спрятать меню, что бы оно выпадало!

Это сообщение отредактировал(а) LeeFORT - 8.1.2015, 16:49

Присоединённый файл ( Кол-во скачиваний: 4 )
Присоединённый файл  menu.rar 50,11 Kb
PM MAIL   Вверх
sQu1rr
Дата 9.1.2015, 13:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: нет
Всего: 13
Цитата(LeeFORT @  8.1.2015,  13:48 Найти цитируемый пост)
Присоединённый файл

Кто нибудь может залить на jsfiddle?
PM MAIL Skype GTalk   Вверх
ТоляМБА
Дата 9.1.2015, 14:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Котэ
***


Профиль
Группа: Завсегдатай
Сообщений: 1607
Регистрация: 15.12.2004

Репутация: нет
Всего: 252
http://jsfiddle.net/tz4p3som/

Содержимое файлов скопипастил по соотв. расширениям. Куда совать картинки не знаю.
PM   Вверх
sQu1rr
Дата 9.1.2015, 16:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: нет
Всего: 13
Цитата(ТоляМБА @  9.1.2015,  11:23 Найти цитируемый пост)
Содержимое файлов скопипастил по соотв. расширениям. Куда совать картинки не знаю. 

Ну тогда уж так: http://jsfiddle.net/tz4p3som/2/
Только всеравно ничего не понятно :(

Немного уточню

Не понятно какое меню должно быть спрятону, куда оно должно выподать. Что вообще требуется от кода

Это сообщение отредактировал(а) sQu1rr - 9.1.2015, 16:13
PM MAIL Skype GTalk   Вверх
LeeFORT
Дата 10.1.2015, 09:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 22.9.2007

Репутация: нет
Всего: нет
sQu1rr, Выпадать оно должно по нажатию на кнопку со стрелкой.
Я полагал, что оно должно было убираться <span class="arrow-drop-down">&nbsp;</span> поскольку это кнопка со стрелкой вниз.
Аналог такого меню на оф сайте мира танков http://worldoftanks.ru/
PM MAIL   Вверх
LeeFORT
Дата 16.1.2015, 01:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 22.9.2007

Репутация: нет
Всего: нет
ап. кто поможет с решением проблемы????
PM MAIL   Вверх
bork
Дата 16.2.2015, 11:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 98
Регистрация: 4.1.2008

Репутация: нет
Всего: нет
Для отображения скрытых элементов можно попробовать такие варианты:

Код


<html><head> 
<title>Spoiler HTML code</title> 
<style type="text/css"> 
a.spoil {font: normal 12px Tahoma; text-decoration:none; color:#0060BF; }
a.spoil-open {font: normal 12px Tahoma; text-decoration:none; color:#FF0000;}
.inner {border: 1px dotted #0080FF; padding: 5px; margin-top:10px; background: #FFFFFF; font: normal 10pt Verdana; color: #0066CC; margin-left: 10px; width:90%;}

</style> 

<script type="text/javascript"> 
function Spoiler(obj) {

var name1 = obj.parentNode.getElementsByTagName("div")[0];
if (name1.style.display == "none") name1.style.display = ""; 
else name1.style.display = "none"; 

var name1 = obj.parentNode.getElementsByTagName("a")[0];
if (name1.innerText == "Показать") name1.innerText = "Скрыть";
else name1.innerText = "Показать";

if (name1.className == "spoil") name1.className = "spoil-open";
else name1.className = "spoil";

} 
</script> 

<a id="name1" href="#" class="spoil" onclick="Spoiler(this);">Показать</a>
<div class="inner" style="display:none;">Содержание Статьи</div>

</head> 
<body> 



-------------------------------ИЛИ--------------------------------------

Код


<script type="text/javascript">
function showDiv(div) 
{ 
if (document.getElementById(div).style.display=="none") 
document.getElementById(div).style.display="block"; 
else 
document.getElementById(div).style.display="none"; 
} 
</script> 

<a href="javascript:showDiv('div19')"> + </a> 
<div id="div19" style="display: none;"> Здесь может быть что угодно!</div>
PM MAIL   Вверх
LeeFORT
Дата 2.3.2015, 00:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 22.9.2007

Репутация: нет
Всего: нет
Доброго всем!

bork, спасибо, но такой вариант не подошел(

В принципе тут я выложил его, как он был изночально.
У меня, как  говорил 2 менюшки. И данную я основывал на первой.
Только вот все работает в первой, а во воторой нет(
Вторая меню

первая меню
Если кликнуть чуть провей документации, то тогда выпадет менюшка.

А во втором случаи нет. Что не так? 
PM MAIL   Вверх
LeeFORT
Дата 3.3.2015, 01:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 22.9.2007

Репутация: нет
Всего: нет
круто юолее 5000 просмотров. и никто решение не подскажет.
На ХТМЛ наверстать могу. Методом тыка проставить стили (поскольку их вообще не знаю), а что говорить о JS.....

по этому ищу решение.  что бы закрыть тему. 

Это сообщение отредактировал(а) LeeFORT - 3.3.2015, 01:23
PM MAIL   Вверх
LeeFORT
Дата 7.3.2015, 17:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 22.9.2007

Репутация: нет
Всего: нет
bork, Попытался подключить твой второй вариант.
Смотрю через отладчик в Мазиле, вроде работает.
Но само меню не выпадает.

Такое ощущение, что оно на заднем плане, а не на переднем. 
PM MAIL   Вверх
LeeFORT
Дата 22.5.2015, 00:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 22.9.2007

Репутация: нет
Всего: нет
Всё таки хотел попросить вновь помощи, что бы доделать это меню.
Всё понимаю. Надоел, задрал, в бан меня.
Но честно. я не силён в веб программировании на столько, что бы не просить о помощи.
Надеюсь найдётся человек который возмет и поможет с этим.

Само меню.
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0602 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.