Bymas | CSS3 помощь

Всем доброго времени суток нужно немного подправить выдвижное меню вот HTML код

<div id="navigation">
<li class="button">
<a href="#">Выдвижное меню</a>
<ul class="dropdown">
<li><a href="#">Главная</a></li>
<li><a href="#">Список доменов</a></li>
<li><a href="#">Добавить домен</a></li>
<li><a href="#">Хотинг</a></li>
</ul>
</li>
</div>

Вот код CSS

#navigation {
height : 65px;
}

#navigation ul li {
float: left;
position: relative;
}

#navigation ul li a {
color: #ffffff;
padding: 0 15px;
font-family: "Cuprum". sans-serif;
text-decoration: none;
line-height: 65px;
display: block;
height: 65px;
}

#navigation ul li a:hover {
background: rgba(183. 43. 43. 0.72);
text-decoration: underline;
}

#navigation .dropdown {
display: none;
position: absolute;
background-color: #6a6ae1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

#navigation li:hover .dropdown {
display: block;
}

#navigation .dropdown li {
width: 100%;
}

Меню работает,но выдвигается оно когда на него наводишь,нужно переделать что-бы срабатывало с помощью клика

$('#navigation li').click(function(){
$(this).find('.dropdown').toggle()
})
писал с телефона, правильность не гарантирую

Если хочешь клик, то нужно подключать JS

iNeeXT, знаю,но не могу понять как,пробывал,все как было и осталось...

Sanity, JS правильно понимаю?

BMW7777 (25.10.2017 в 19:12)
Sanity, JS правильно понимаю?

Bootstrap ' ом пользуйся или в зц есть готовый меню с выдвижением как на Nexus

HTML:





<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

  

<div id="navigation">

<li class="button">

<a href="#" id="open_menu">Выдвижное меню</a>

<ul class="dropdown" id="dropdown_menu">

<li><a href="#">Главная</a></li>

<li><a href="#">Список доменов</a></li>

<li><a href="#">Добавить домен</a></li>

<li><a href="#">Хотинг</a></li>

</ul>

</li>

</div>

CSS:



#navigation {

height : 65px;

}



#navigation ul li {

float: left;

position: relative;

}



#navigation ul li a {

color: #ffffff;

padding: 0 15px;

font-family: "Cuprum". sans-serif;

text-decoration: none;

line-height: 65px;

display: block;

height: 65px;

}



#navigation ul li a:hover {

background: rgba(183. 43. 43. 0.72);

text-decoration: underline;

}



#navigation .dropdown {

display: none;

position: absolute;

background-color: #6a6ae1;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

z-index: 1;

}



/*

#navigation li:hover .dropdown {

display: block;

}*/



#navigation .dropdown li {

width: 100%;

}

JS:



var isOpen = false;



$('#open_menu').click(function() {

	if (isOpen) {

  	$('#dropdown_menu').hide();

    isOpen = false;

  } else {

  	$('#dropdown_menu').show();

    isOpen = true;

  }

});

________
посл. ред. 25.10.2017 в 19:25; всего 2 раз(а); by iNeeXT

JS-код тебе нужно или в файл сохранить или в тегах script прописать на странице.

Вот здесь пример https://jsfiddle.net/dnz4foe8/
________
посл. ред. 25.10.2017 в 19:27; всего 1 раз(а); by iNeeXT

BMW7777 (25.10.2017 в 19:12)
Sanity, JS правильно понимаю?

ну блин да, и библиотека jquery.
подключаешь скрипт jquery (или Zepto). Потом подключаешь что я дал