Плавно выпадающее меню

@Vokialus · Регистрация: 31.10.2016

Author24 — интернет-сервис помощи студентам

Добрый день. Пытаюсь создать выпадающее меню, элементы которого плавно выезжали бы. Однако, по какой-то причине выпадание не происходит. Пожалуйста, подскажите, в чем проблема. СSS- и HTML-код прилагается.

CSS

<style>
* {
 margin: 0;
 padding: 0;
}
 
body {
 width: 100%;
 height: 100%;
 color:#333;
background-image:url(images/bg.png);
 font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size:0.94em;
 line-height:135%;
 
}
 
aside, nav, footer, header, section { display: block; }
 
ul {
 list-style:none;
}
 
a {
 text-decoration:none;
}
 
a:hover {
 text-decoration: none;
}
 
 
 
.header{
 width:100%;
 background: #b1fab1;
 height:170px;
 z-index: 4;
 }
 
#headerInner {
 
 position:relative;
 border:0px solid #333;
 width:1200px;
 height:170px;
 margin:0 auto;
 margin-top:0px;
 }
 
 
 #footer {
 margin-top:1200px;
 height:75px;
 width:100%;
 background: #000000;
 }
 
 
}
 #wrapper {
 margin-top:40px;
 width: 1200px;
 margin: 0 auto;
 height: auto !important;
 }
 
 #content #colLeft {
 background: #fff;
 float:left;
 width:800px;
 margin-right:0px;
 }
 
#content #colRight {
 margin-left:45px;
 float:left;
 width:350px;
 position:relative;
}
 
#middle:after {
 content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}
 
 
 
/*----------------------------
 Логотип
------------------------------*/
 
.logo {
 position:absolute;
 left:0px;
 top:6px;
 }
 
 
 .bottomMenu {
 width:100%;
 
 height: 70px;
 position:relative;
 left:0px;
 bottom:0px;
 
 background: url(images/bgmenu.png) 0px 0px repeat-x;
 }
 
.dropdown_nav {
 font-weight:bold;
 display:inline-block;
 list-style:none;
 border-bottom:0px solid #777;
 margin-top:18px;
 }
.dropdown_nav:after {
 display: block;
    content: "";
    clear: both;
    float: none;
    }
.dropdown_nav li {
 float:left;
 position:relative;
 display:inline-block;
 
 }
 
.dropdown_nav li a {
 
 font-weight:100;
 font-size:18px;
 color:#fff;
 padding:15px 22px 20px 22px;
 background: url(images/linemenu.png) right no-repeat;
 -moz-transition: background-color 0.3s 0.01s ease;
 -o-transition: background-color 0.3s 0.01s ease;
 -webkit-transition: background-color 0.3s 0.01s ease;
 
 }
 .dropdown_nav li a:hover {
 background: #000;
 text-decoration:none;
 color:#0dbfe5;
}
 
 
 .dropdown_nav li a.first {
 -moz-border-radius:5px 0px 0px 5px;
 -webkit-border-radius:5px 0px 0px 5px;
 }
 
/* Выпадающее меню */
 .dropdown_nav .sub_nav {
 z-index: 4;
 width:180px;
 padding:0px;
 position:absolute;
 top:42px;
 left:0px;
 border:0px solid #ddd;
 border-top:none;
 background: #000;
 display:none;
opacity: 0;
  transition: all 0.5s ease-in-out;
  -moz-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  -o-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin:0 0;
  -moz-transform-origin:0 0;
  -o-transform-origin:0 0;
  -ms-transform-origin:0 0;
  transform-origin:0 0;
 }
 
.dropdown_nav .sub_nav li {
 
 width:180px;
 padding:0px;
 }
 
.dropdown_nav .sub_nav li a {
 background: none;
 font-weight: normal;
 font-size:15px;
 display:block;
 border-bottom:0px solid #e5e0b3;
 padding-left:10px;
 color:#fff;
 
 }
 .dropdown_nav .sub_nav li a:hover {
 background:#222;
 color:#0dbfe5;
  opacity: 1;
  -moz-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  -o-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
}
.sub_nav-link:after {
 
  font-family: "FontAwesome";
  color: #404040;
  margin-left: 10px;
}
 
</style>

HTML5

<body>
 
<!-- Начало хидер -->
<header class="header">
<div id="headerInner">
 
 
 
 <span style="float:right;  padding:10px 20px 0px 10px;" >
<img src="images/tel.png" height="28"/> <span style="vertical-align:super;  font-family:Franklin Gothic Medium; font-size:1.2em; " >  <font color="#1ca0a2">(4012) 21-16-00 </font> </span> <br>
 <img src="images/fax.png" height="28"/>  <span style="vertical-align:super; font-family:Franklin Gothic Medium; font-size:1.2em"> <font color="#1ca0a2"> (4012) 91-61-25 </font> </span> 
 
<div class="logo">
<a href="#"><img src="images/logo.png" height="170" /></a>
 
<!-- Начало #bottomMenu -->
 
</div>
 
 
</div>
<nav class="bottomMenu">
<ul class="dropdown_nav">
 
 <li><a href="#" class="sub_nav-link">Планшеты\смартфоны</a>
 <ul class="sub_nav">
 <li><a href="#">122</a></li>
 <li><a href="#">Подменю #2</a></li>
 <li><a href="#">Подменю #3</a></li>
 <li><a href="#">Подменю #4</a></li>
 </ul>
<li><a href="#">ПК и ноутбуки</a>
<ul class="sub_nav">
 <li><a href="#">Подменю #1</a></li>
 <li><a href="#">Подменю #2</a></li>
 <li><a href="#">Подменю #3</a></li>
 <li><a href="#">Подменю #4</a></li>
 </ul>
<li><a href="#">Комплектующие</a>
<ul class="sub_nav">
 <li><a href="#">Подменю #1</a></li>
 <li><a href="#">Подменю #2</a></li>
 <li><a href="#">Подменю #3</a></li>
 <li><a href="#">Подменю #4</a></li>
 </ul>
<li><a href="#">Периферия</a>
<ul class="sub_nav">
 <li><a href="#">Подменю #1</a></li>
 <li><a href="#">Подменю #2</a></li>
 <li><a href="#">Подменю #3</a></li>
 <li><a href="#">Подменю #4</a></li>
 </ul>
<li><a href="#">Услуги</a>
<ul class="sub_nav">
 <li><a href="#">Подменю #1</a></li>
 <li><a href="#">Подменю #2</a></li>
 <li><a href="#">Подменю #3</a></li>
 <li><a href="#">Подменю #4</a></li>
 </ul>
<li><a href="#">Контакты</a>
<ul class="sub_nav">
 <li><a href="#">Подменю #1</a></li>
 <li><a href="#">Подменю #2</a></li>
 <li><a href="#">Подменю #3</a></li>
 <li><a href="#">Подменю #4</a></li>
 </ul>
 
 </ul>
 </nav><!-- конец #bottomMenu -->
</header><!-- Конец хидер -->
 
<!-- начало врапер -->
 
<section id="wrapper">
<div id="middle">
<div id="content">
<div id="colLeft">
 
</div><!-- Конец коллефт -->
 
<aside id="colRight">
 
</aside><!-- Конец колрайт -->
 
</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->
 
<!-- Начало футер -->
 
<footer id="footer">
<a href="#"><img src="images/logo.png" height="65"  style="padding:6px 20px 0px 70px;" /></a>
<span style="float:right;  padding:10px 75px 0px 10px;" >
<img src="images/tel.png" height="28"/> <span style="vertical-align:super;  font-family:Franklin Gothic Medium; font-size:1.2em; " >  <font color="#1ca0a2">(4012) 21-16-00 </font> </span> <br>
 <img src="images/fax.png" height="28"/>  <span style="vertical-align:super; font-family:Franklin Gothic Medium; font-size:1.2em"> <font color="#1ca0a2"> (4012) 91-61-25 </font> </span> 
 
</span>
<div id="footerInner">
 
</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->
 
</body>
</html>

@mrtoxas · 14.03.2017, 14:59

Vokialus, а где у вас часть кода, отвечающая за выпадение меню?

@Vokialus · 14.03.2017, 16:39 **[ТС]**

По задумке, после комментария "Выпадающее меню".

@mrtoxas · 14.03.2017, 16:52

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

@Vokialus · 21.03.2017, 13:58 **[ТС]**

UPD:
Прошу прощения, что пропал. Спасибо, понял, что проблема в моей невнимательности. Обычное выпадающее меню сделать получилось, а вот плавное.. Подозреваю, что попросту запутался в transition.

CSS

* {
 margin: 0;
 padding: 0;
}
 
body {
 width: 100%;
 height: 100%;
 color:#333;
background-image:url(images/bg.png);
 font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size:0.94em;
 line-height:135%;
 
}
 
aside, nav, footer, header, section { display: block; }
 
ul {
 list-style:none;
}
 
a {
 text-decoration:none;
}
 
a:hover {
 text-decoration: none;
}
 
 
 
.header{
 width:100%;
 background: #b1fab1;
 height:115px;
 z-index: 4;
 }
 
#headerInner {
 
 position:relative;
 border:0px solid #333;
 width:100%;
 height:170px;
 margin:0 auto;
 margin-top:0px;
 }
 
 
 #footer {
 margin-top:1200px;
 height:75px;
 width:100%;
 background: #b1fab1
 
 
}
 #wrapper {
 margin-top:40px;
 width: 1200px;
 margin: 0 auto;
 height: auto !important;
 }
 
 #content #colLeft {
 background: #fff;
 float:left;
 width:800px;
 margin-right:0px;
 }
 
#content #colRight {
 margin-left:45px;
 float:left;
 width:350px;
 position:relative;
}
 
#middle:after {
 content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}
 
 
 
/*----------------------------
 Логотип
------------------------------*/
 
 
 
 
 .bottomMenu {
 width:100%;
 
 height: 70px;
 position:relative;
 left:0px;
 bottom:55px;
 
 background: url(images/bgmenu.png) 0px 0px repeat-x;
 }
 
#dropdown_nav {
 font-weight:bold;
 display:inline-block;
 list-style:none;
 border-bottom:0px solid #777;
 margin-top:18px;
 }
#dropdown_nav:after {
 display: block;
    content: "";
    clear: both;
    float: none;
    }
#dropdown_nav li {
 float:left;
 position:relative;
 display:inline-block;
 
 }
 
#dropdown_nav li a {
 
 font-weight:100;
 font-size:18px;
 color:#fff;
 padding:15px 22px 20px 22px;
 background: url(images/linemenu.png) right no-repeat;
 -moz-transition: 0.5s;
 -o-transition:  0.5s;
 -webkit-transition: 0.5s;
 
 }
 #dropdown_nav li a:hover {
 background: #000;
 text-decoration:none;
 color:#0dbfe5;
}
 
 .sub_nav li a:hover {
 background: #000;
 text-decoration:none;
 color:#0dbfe5;
}
 #dropdown_nav li a.first {
 -moz-border-radius:5px 0px 0px 5px;
 -webkit-border-radius:5px 0px 0px 5px;
 }
#dropdown_nav ul li{
 -moz-transition: 5s;
 -o-transition:  5s;
 -webkit-transition: 5s;
 opacity:0;
 transition:  5s;
 width:100%:
}
#dropdown_nav li ul li{
 -moz-transition-delay:0s;
 -o-transition-delay:0s;
 -webkit-transition-delay:0s;
 transition-delay:0s;
 }
 #dropdown_nav li:hover ul li{
 -moz-transition-delay:5s;
 -o-transition-delay:5s;
 -webkit-transition-delay:5s;
 transition-delay:5s;
 opacity:1;
 }
 #dropdown_nav ul li a{
  -moz-transition: 5s;
 -o-transition:  5s;
 -webkit-transition: 5s;
 transition: 5s;
 }
/* Выпадающее меню */
 #dropdown_nav .sub_nav {
 z-index: 10;
 width:180px;
 padding:0px;
 position:absolute;
 top:42px;
 left:0px;
 border:0px solid #ddd;
 border-top:none;
 background: #000;
 display:none;
 }
 
#dropdown_nav .sub_nav li {
 
 width:180px;
 padding:0px;
 }
 
#dropdown_nav .sub_nav li a {
 background: none;
 font-weight: normal;
 font-size:15px;
 display:block;
 border-bottom:0px solid #e5e0b3;
 padding-left:10px;
 color:#fff;
 }
 
 #dropdown_nav > li:hover .sub_nav {
 background:#222;
 color:#0dbfe5;
 display:block;
 }
 
 /* Форма поиска */
 form{
        width:0px;
        margin:0 auto;
}
.search { 
width:350px;
height:30px;
 padding-left:10px;     
        margin-top:-30px;
        margin-left:20px;
        background: white; 
        font-size:12pt;
}
 
 .rounded { 
        border-radius:9px; 
        -moz-border-radius:9px; 
        -webkit-border-radius:9px; 
}
/* Цвет текста в форме */
input[type=text]{
        color:black;
        }
.search .form-actions{
    width:28px;
    height:28px;
    float:left;
    background:url(images/search.png) 5px 2px no-repeat;
    }
    
.search-block-form .form-actions input:hover{
    cursor:pointer;
    }
.search-block-form .form-actions input{
    overflow:hidden;
    text-indent:-9999px;
    }

@SergioSup · 21.03.2017, 15:33

смена свойства display:none; на display:block; через css не анимируется. Обычно анимируют height (c 0 до нужной) или opacity и visibility или transform: translate() или transform: scale()

@Vokialus · 21.03.2017, 20:02 **[ТС]**

Исправил, сделал с помощью height и transition. Все равно не реагирует.

CSS

* {
 margin: 0;
 padding: 0;
}
 
body {
 width: 100%;
 height: 100%;
 color:#333;
background-image:url(images/bg.png);
 font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size:0.94em;
 line-height:135%;
 
}
 
aside, nav, footer, header, section { display: block; }
 
ul {
 list-style:none;
}
 
a {
 text-decoration:none;
}
 
a:hover {
 text-decoration: none;
}
 
 
 
.header{
 width:100%;
 background: #b1fab1;
 height:115px;
 z-index: 4;
 }
 
#headerInner {
 
 position:relative;
 border:0px solid #333;
 width:100%;
 height:170px;
 margin:0 auto;
 margin-top:0px;
 }
 
 
 #footer {
 margin-top:1200px;
 height:75px;
 width:100%;
 background: #707070;
 
 
}
 #wrapper {
 margin-top:40px;
 width: 1200px;
 margin: 0 auto;
 height: auto !important;
 }
 
 #content #colLeft {
 background: #fff;
 float:left;
 width:800px;
 margin-right:0px;
 }
 
#content #colRight {
 margin-left:45px;
 float:left;
 width:350px;
 position:relative;
}
 
#middle:after {
 content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}
 
 
 
/*----------------------------
 Логотип
------------------------------*/
 
 
 
 
 .bottomMenu {
 width:100%;
 
 height: 70px;
 position:relative;
 left:0px;
 bottom:55px;
 
 background: url(images/bgmenu.png) 0px 0px repeat-x;
 }
 
 
 
#dropdown_nav {
 font-weight:bold;
 display:inline-block;
 list-style:none;
 border-bottom:0px solid #777;
 margin-top:18px;
 }
 
#dropdown_nav li {
 float:left;
 position:relative;
 display:inline-block;
 
 }
#dropdown_nav li ul{
max-height:0px;
 
    overflow:hidden;
 -webkit-transition:max-height 0.4s linear;
    -moz-transition:max-height 0.4s linear;
    transition:max-height 0.4s linear;
}
 #dropdown_nav li:hover .sub_nav{
max-height:220px;
}
 
#dropdown_nav li a {
 
 font-weight:100;
 font-size:18px;
 color:#fff;
 padding:15px 22px 20px 22px;
 background: url(images/linemenu.png) right no-repeat;
 -moz-transition: 0.5s;
 -o-transition:  0.5s;
 -webkit-transition: 0.5s;
 
 }
 #dropdown_nav li a:hover {
 background: #000;
 text-decoration:none;
 color:#0dbfe5;
}
 
 
/* Выпадающее меню */
 #dropdown_nav  .sub_nav {
 z-index: 10;
 width:180px;
 padding:0px;
 position:absolute;
 top:42px;
 left:0px;
 border:0px solid #ddd;
 border-top:none;
 background: #000;
 display:none;
 
 
 }
 
 
 
#dropdown_nav .sub_nav li a {
 background: none;
 font-weight: normal;
 font-size:15px;
 display:block;
 border-bottom:0px solid #e5e0b3;
 padding-left:10px;
 color:#fff;
 }
 
 #dropdown_nav > li:hover .sub_nav {
 background:#222;
 color:#0dbfe5;
 display:block;
 }
 
 /* Форма поиска */
 form{
        width:0px;
        margin:0 auto;
}
.search { 
width:350px;
height:30px;
 padding-left:10px;     
        margin-top:-30px;
        margin-left:20px;
        background: white; 
        font-size:12pt;
}
 
 .rounded { 
        border-radius:9px; 
        -moz-border-radius:9px; 
        -webkit-border-radius:9px; 
}
/* Цвет текста в форме */
input[type=text]{
        color:black;
        }
.search .form-actions{
    width:28px;
    height:28px;
    float:left;
    background:url(images/search.png) 5px 2px no-repeat;
    }
    
.search-block-form .form-actions input:hover{
    cursor:pointer;
    }
.search-block-form .form-actions input{
    overflow:hidden;
    text-indent:-9999px;
    }

@SergioSup · 21.03.2017, 21:19

а display:none; и display:block; зачем оставили?

@Vokialus · 23.03.2017, 19:01 **[ТС]**

Большое спасибо и еще раз прошу прощения за невнимательность. Выпадающее меню полностью работает. Но внезапно возникла другая проблема: если начать сворачивать окно браузера справа налево, все выпадающее меню "поплывет". Отчего это может происходить? (файл 1() )

@SergioSup · 24.03.2017, 12:54

меню не помещается в экран и пункты по очереди переносятся на новую строчку. надо или уменьшать размеры для определенных экранов (в медиа запросах) или(и) делать для узких экранов мобильное меню (при клике на кнопку, выезжающее справа или слева).

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	14.03.2017, 14:59	2
	Vokialus, а где у вас часть кода, отвечающая за выпадение меню? 0

@Vokialus 0 / 0 / 0 Регистрация: 31.10.2016 Сообщений: 51
	14.03.2017, 16:39 [ТС]	3
	По задумке, после комментария "Выпадающее меню". 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	14.03.2017, 16:52	4
	Я не про само меню, а про конкретно ту часть, которая говорит браузеру, чтобы меню выпало. Я у вас в коде такого не нашел. Вы только описываете стили ссылки при наведении на нее. 1

@SergioSup 84 / 81 / 42 Регистрация: 20.01.2017 Сообщений: 219
	21.03.2017, 15:33	6
	смена свойства `display:none;` на `display:block;` через css не анимируется. Обычно анимируют height (c 0 до нужной) или opacity и visibility или transform: `translate()` или `transform: scale()` 0

@SergioSup 84 / 81 / 42 Регистрация: 20.01.2017 Сообщений: 219
	21.03.2017, 21:19	8
	а display:none; и display:block; зачем оставили? 1

@SergioSup 84 / 81 / 42 Регистрация: 20.01.2017 Сообщений: 219
	24.03.2017, 12:54	10
	меню не помещается в экран и пункты по очереди переносятся на новую строчку. надо или уменьшать размеры для определенных экранов (в медиа запросах) или(и) делать для узких экранов мобильное меню (при клике на кнопку, выезжающее справа или слева). 1

Опции темы