Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
driver
0 / 0 / 0
Регистрация: 09.07.2014
Сообщений: 3
#1

Меню выпадающее вниз на java script - JavaScript

09.07.2014, 17:32. Просмотров 1240. Ответов 6
Метки нет (Все метки)

Добрый день!
Скажу сразу, я не знаю Javascrip вообще (немного знаком с HTML)

Есть необходимость на сайте организовать выпадающее меню при наведении курсора на картинку
Я два дня по инету лазил вот что получилось
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
 
<style>
ul, li {margin:0; padding:0; list-style-type:none;}
#menu-kyi {list-style-type:none;}
#menu-kyi > li {display:inline-block; position:relative;}
#menu-kyi > li > a {display:inline-block;}
#menu-kyi > li:hover > a {color:#009999;}
#menu-kyi > li > ul {position:absolute; top:42px; left:0px; display:none;}
#menu-kyi > li:hover > ul {display:block; box-shadow:1px 1px 5px #ddd;}
#menu-kyi > li:hover > ul > li {list-style-type:none;}
#menu-kyi > li:hover > ul > li > a {display:inline-block; width:200px; padding:10px; background-color:#f2f2f2; border-top:1px solid #FFF; border-left:1px solid #FFF; border-bottom:1px solid #ddd; border-right:1px solid #ddd; border-radius:3px;}
a:hover {color:#242424;}
</style>
 
<body>
 
<div>
<ul id="menu-kyi">
<li>
<a href="#"><img src="6_udliniteli.png" alt="альтернативный текст"></a>
<ul>
<li><a href="#">Подраздел1</a></li>
<li><a href="#">Большой подраздел2</a></li>
<li><a href="#">Подраздел3</a></li>
</ul>
</li>
</ul>
</div>
 
</body>
</html>
Все бы хорошо, но это не работает на нашем сайте.
Я советовался с разработчиками сайта, они сказали что есть какие то несовместимости с "ul" "li" и надо использовать либо jquery либо java script
Помогите сделать менюшку. В идеале было бы здорво если бы мою менюшку получилось бы реализовать на Javascript
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.07.2014, 17:32
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Меню выпадающее вниз на java script (JavaScript):

Как сделать, чтобы выпадающее окно на Java Script всегда было сверху?
Как сделать, чтобы выпадающее окно на Java Script всегда было сверху? Как в...

Выпадающее меню на JS
Здравствуйте! у меня меню из картинок и ссылок. При наведении курсором на...

Выпадающее меню
Скажите, как создать на Яваскрипт выпадающее меню с подпунктами типа такого....

Выпадающее меню
Доброго времени суток. Не знаю в какую сторону копать, поэтому нужна ваша...

Выпадающее меню
Здравствуйте, у меня возникла проблема с выпадающим меню. Я скачала генератор...

Выпадающее меню
Добрый день ! Я новичок. Что то неполучается у меня с JS. Посмотрите, может...

6
F1sher
1 / 1 / 1
Регистрация: 09.07.2014
Сообщений: 5
09.07.2014, 23:18 #2
Посмотрите тут http://javascript-array.com/scripts/simple_drop_down_menu/

Куда вставлять html и css вы знаете, а код javascript (тот что в конце) вставьте в head между тегами
HTML5
1
<script></script>
0
Alex Japson
36 / 36 / 11
Регистрация: 07.08.2013
Сообщений: 145
Записей в блоге: 1
09.07.2014, 23:41 #3
а если новичок, то лучше используй jquery)

Добавлено через 5 минут
HTML5
1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
это чтобы подкл jquery? а это
Javascript
1
2
3
4
5
6
7
function showSubmenu() {
$('#submenu').show();
}
function hideSubmenu() {
$('#submenu').hide();
}
$('#menu').hover(showSubmenu, hideSubmenu);


Добавлено через 1 минуту
сам код скрытия и открытия менюшки)
0
driver
0 / 0 / 0
Регистрация: 09.07.2014
Сообщений: 3
10.07.2014, 09:25  [ТС] #4
F1sher, Спасибо, но не получилось :-(
Причина - используются "ul" "li"

Alex Japson, Спасибо, сейчас буду долго разбираться :-)
0
Alex Japson
36 / 36 / 11
Регистрация: 07.08.2013
Сообщений: 145
Записей в блоге: 1
10.07.2014, 10:01 #5
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".menu").hover(function(){
    $(".submenu").show();
    },function(){
    $(".submenu").hide();
  });
});
</script>
</head>
<body>
<div class="menu">Menu<div>
<ul class="submenu">
<li>1</li>
<li>2</li>
</ul>
 
</body>
</html>
так быстрее

Добавлено через 1 минуту
Пример
1
driver
0 / 0 / 0
Регистрация: 09.07.2014
Сообщений: 3
10.07.2014, 10:18  [ТС] #6
Alex Japson, Да, это то что надо, только я не совсем понял одного
по умолчанию (при первой загрузке страницы) менюшка в развернутом виде. Это так и должно быть?
Можно ли что то подправить что бы она была свернута?
0
Alex Japson
36 / 36 / 11
Регистрация: 07.08.2013
Сообщений: 145
Записей в блоге: 1
10.07.2014, 10:23 #7
Лучший ответ Сообщение было отмечено driver как решение

Решение

а да, сори) вот так
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".submenu").hide();
  $(".menu").hover(function(){
    $(".submenu").show();
    },function(){
    $(".submenu").hide();
  });
});
</script>
</head>
<body>
<div class="menu">Menu<div>
<ul class="submenu">
<li>1</li>
<li>2</li>
</ul>
 
</body>
</html>
0
10.07.2014, 10:23
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.07.2014, 10:23
Привет! Вот еще темы с решениями:

Выпадающее меню
Помогите пожалуйста найти скрипр меню, такой как на этом сайте (или что-то...

Выпадающее меню
Здравствуйте, как задать скорость выпадающего меню и чтобы меню при наведении...

Выпадающее меню
Создаю выпадающее меню с помощью java script &lt;script type=&quot;text/javascript&quot;&gt;...

Выпадающее меню на JS
Добрый день! Подскажите пожалуйста как на JS реализовать скролл? Добавление...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru