Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Перезагрузить страницу Почему не появляется выпадающее меню?
Регистрация

Восстановить пароль
Регистрация Задать
вопрос		 Заплачу
за решение		 Новые
сообщения 		Сообщения
за день 		Расширенный
поиск		 Правила Всё
прочитано

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 01.03.2020, 15:36   #1
Turova1
Новичок
Джуниор
 
Регистрация: 01.03.2020
Сообщений: 1
Вопрос Почему не появляется выпадающее меню?
Уже долгое время вожусь с этим кодом,чего только не делала, но выпадающее меню почему-то не появляется,видимо,где-то допустила ошибку, помогите, пожалуйста найти:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Zara-botok.ru
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.."></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="block-body">
<header>
<div class="logo">
<a href="index.html">
<span class="zara">ZARA</span>-<span class="botok">BOTOK</span>.ru
</a>
<p>Заработать-это просто!</p>
</div>
<div class="top-menu">
<ul>
<li><a href="clickMenu">Темы
<span class="down">▼</span>
<span class="up">▲</span>
</a></li>
<li><a href="#">Схемы</a></li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Игры</a></li>
</ul>

<div class="visibleMenu">
<div class="subMenu">
<p class="p-title">Развод</p>

<ul>
<li><a href="#">Финансовая пирамида</a></li>
<li><a href="#">Гарант</a></li>
<li><a href="#">Вк</a></li>
<li><a href="#">Итог</a></li>
</ul>
</div>
<div class="subMenu">
<p class="p-title">Актуальные</p>
<ul>
<li><a href="#">Ebay and AliExpress</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Vtope</a></li>
<li><a href="#">YouDo</a></li>
</ul>
</div>
<div class="subMenu">
<p class="p-title">Узнай больше</p>
<ul>
<li><a href="">История создания</a></li>
<li><a href="">Успехи</a></li>
</ul>
</div>
<div class="subMenu">
<p class="p-title">Играй и зарабатывай</p>
<ul>
<li><a href="#">Alawar</a></li>
<li><a href="#">FalcoPartners</a></li>
<li><a href="#">Advego</a></li>
<li><a href="#">Actionplay</a></li>
<li><a href="#">Rich Birds</a></li>
</ul>
</div>

</div>


</div>

<div class="block-top-auth">
<p><a href="#">Вход</a></p>
<p><a href="#">Регистрация</a></p>
</div>
</header>
<div id="block-content"></div>

</div>
</body>
</html>

CSS

* {
margin: 0;
padding: 0;
}
body {
background-image: url("http://abali.ru/wp-content/uploads/2014/04/chernoe_derevo.jpg");
}
#block-body {
width: 1035px;
margin: 5px auto;
height: auto;
}
header {
width: 1035px;
height: 80px;
background-color: black;
}
#block-content {
width: 1035px;
height: auto;
min-height: 500px;
}
.logo {
width: 200px;
float: left;
height: 80px;
}
.logo a {
display: block;
margin-left: 15px;
margin-top: 10px;
font-family: "Exo2-Bold" , sans-serif;
font-size: 28px;
color: #b2aeb2;
text-decoration: none;
cursor: pointer;
}
.zara {
color: #8a709c;

}
.botok {
color: #70839c;
}
.logo p {
margin-left: 20px;
margin-top: 2px;
margin-bottom: 5px;
font-family: "Exo2-Medium" , sans-serif;
font-size: 13px;
color: white;
}
.top-menu {
width: 685px;
height: 80px;
float: left;
}
.top-menu ul li {
list-style: none;
float: left;
text-align: center;
}
.top-menu ul li a {
display: block;
width: 171px;
text-decoration: none;
font-family: "Exo2-Medium", sans-serif;
font-size: 17px;
color: white;
height: 55px;
padding-top: 25px;
cursor: pointer;
}
.top-menu ul li a:hover {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
background: #735996;
}
.block-top-auth {
width: 100px;
float: left;
margin-left: 40px;
height: 80px;
}
.block-top-auth p {
margin-top: 12px;
text-align: center;
margin-bottom: 8px;

}
.block-top-auth a {
text-decoration: none;
color: white;
font-family: "Exo2-Medium", sans-serif;
font-size: 15px;
text-decoration: underline;
cursor: pointer;
}
.block-top-auth a:hover {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
color: #735996;
}
.visibleMenu {
width: 685px;
height: 220px;
margin-top: 80px;
background: black;
opacity: 0.8;
display: none;
}
.subMenu {
float: left;
margin-left: 30px;
}
.subMenu p {
font-family: "Exo2-Bold", sans-serif;
font-size: 19px;
color: white;
text-align: center;
margin-bottom: 20px;
margin-top: 10px;
}
.subMenu ul {
border-top: 2px solid white;
}
.subMenu ul li {
float: none;
list-style: none;
text-align: center;
margin-bottom: 5px;
}
.subMenu ul li a {
display: block;
width: 135px;
height: 20px;
text-decoration: none;
font-family: "Exo2-Medium", sans-serif;
font-size: 17px;
color: white;
cursor: pointer;
padding-top: 3px;
}
.up, .down {
font-size: 12px;
}
.


Javascript

$(document).ready(function(){
$(".up").hide();
$(".clickMenu").click(function(){
$(".visibleMenu").toggle(500)
$(".up").toggle();
$(".down").toggle();
});


});
Turova1 вне форума Ответить с цитированием
Старый 02.04.2020, 18:39   #2
Blood_ghosT
Пользователь
 
Регистрация: 29.07.2011
Сообщений: 92
По умолчанию
Цитата:
Сообщение от Turova1 Посмотреть сообщение
Уже долгое время вожусь с этим кодом,чего только не делала, но выпадающее меню почему-то не появляется,видимо,где-то допустила ошибку, помогите, пожалуйста найти:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Zara-botok.ru
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.."></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="block-body">
<header>
<div class="logo">
<a href="index.html">
<span class="zara">ZARA</span>-<span class="botok">BOTOK</span>.ru
</a>
<p>Заработать-это просто!</p>
</div>
<div class="top-menu">
<ul>
<li><a href="clickMenu">Темы
<span class="down">▼</span>
<span class="up">▲</span>
</a></li>
<li><a href="#">Схемы</a></li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Игры</a></li>
</ul>

<div class="visibleMenu">
<div class="subMenu">
<p class="p-title">Развод</p>

<ul>
<li><a href="#">Финансовая пирамида</a></li>
<li><a href="#">Гарант</a></li>
<li><a href="#">Вк</a></li>
<li><a href="#">Итог</a></li>
</ul>
</div>
<div class="subMenu">
<p class="p-title">Актуальные</p>
<ul>
<li><a href="#">Ebay and AliExpress</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Vtope</a></li>
<li><a href="#">YouDo</a></li>
</ul>
</div>
<div class="subMenu">
<p class="p-title">Узнай больше</p>
<ul>
<li><a href="">История создания</a></li>
<li><a href="">Успехи</a></li>
</ul>
</div>
<div class="subMenu">
<p class="p-title">Играй и зарабатывай</p>
<ul>
<li><a href="#">Alawar</a></li>
<li><a href="#">FalcoPartners</a></li>
<li><a href="#">Advego</a></li>
<li><a href="#">Actionplay</a></li>
<li><a href="#">Rich Birds</a></li>
</ul>
</div>

</div>


</div>

<div class="block-top-auth">
<p><a href="#">Вход</a></p>
<p><a href="#">Регистрация</a></p>
</div>
</header>
<div id="block-content"></div>

</div>
</body>
</html>

CSS

* {
margin: 0;
padding: 0;
}
body {
background-image: url("http://abali.ru/wp-content/uploads/2014/04/chernoe_derevo.jpg");
}
#block-body {
width: 1035px;
margin: 5px auto;
height: auto;
}
header {
width: 1035px;
height: 80px;
background-color: black;
}
#block-content {
width: 1035px;
height: auto;
min-height: 500px;
}
.logo {
width: 200px;
float: left;
height: 80px;
}
.logo a {
display: block;
margin-left: 15px;
margin-top: 10px;
font-family: "Exo2-Bold" , sans-serif;
font-size: 28px;
color: #b2aeb2;
text-decoration: none;
cursor: pointer;
}
.zara {
color: #8a709c;

}
.botok {
color: #70839c;
}
.logo p {
margin-left: 20px;
margin-top: 2px;
margin-bottom: 5px;
font-family: "Exo2-Medium" , sans-serif;
font-size: 13px;
color: white;
}
.top-menu {
width: 685px;
height: 80px;
float: left;
}
.top-menu ul li {
list-style: none;
float: left;
text-align: center;
}
.top-menu ul li a {
display: block;
width: 171px;
text-decoration: none;
font-family: "Exo2-Medium", sans-serif;
font-size: 17px;
color: white;
height: 55px;
padding-top: 25px;
cursor: pointer;
}
.top-menu ul li a:hover {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
background: #735996;
}
.block-top-auth {
width: 100px;
float: left;
margin-left: 40px;
height: 80px;
}
.block-top-auth p {
margin-top: 12px;
text-align: center;
margin-bottom: 8px;

}
.block-top-auth a {
text-decoration: none;
color: white;
font-family: "Exo2-Medium", sans-serif;
font-size: 15px;
text-decoration: underline;
cursor: pointer;
}
.block-top-auth a:hover {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
color: #735996;
}
.visibleMenu {
width: 685px;
height: 220px;
margin-top: 80px;
background: black;
opacity: 0.8;
display: none;
}
.subMenu {
float: left;
margin-left: 30px;
}
.subMenu p {
font-family: "Exo2-Bold", sans-serif;
font-size: 19px;
color: white;
text-align: center;
margin-bottom: 20px;
margin-top: 10px;
}
.subMenu ul {
border-top: 2px solid white;
}
.subMenu ul li {
float: none;
list-style: none;
text-align: center;
margin-bottom: 5px;
}
.subMenu ul li a {
display: block;
width: 135px;
height: 20px;
text-decoration: none;
font-family: "Exo2-Medium", sans-serif;
font-size: 17px;
color: white;
cursor: pointer;
padding-top: 3px;
}
.up, .down {
font-size: 12px;
}
.


Javascript

$(document).ready(function(){
$(".up").hide();
$(".clickMenu").click(function(){
$(".visibleMenu").toggle(500)
$(".up").toggle();
$(".down").toggle();
});


});

мельном глянул что то не нашел класс .clickMenu поэтому и не работает! $(".clickMenu").click(function(){

в таком виде котором вы предоставили оч сложно читается
Blood_ghosT вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выпадающее меню Vladya HTML и CSS 3 14.12.2013 21:45
Выпадающее меню из БД Nenado PHP 5 25.03.2013 17:18
Выпадающее меню, что не так? magic_mark HTML и CSS 6 26.10.2011 13:29
Выпадающее меню Molodoy hacker Общие вопросы Delphi 4 10.05.2011 16:39
Выпадающее меню CHERT БД в Delphi 17 16.06.2007 04:55

Реклама на форуме - Обратная связь - Правила - Исходники Delphi - Справочник Delphi - Архив - Вверх