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

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

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 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