При фулл расширении всё работает прекрасно, при нажатии на "информация" выпадаёт окно ( class="dropdown-content" меняется на class="dropdown-content show" )
В мобильной версии окно не выпадаёт, но если смотреть код страницы, то он будет меняться в версии для ПК, как сделать, что бы при нажатии, это окно выпадало не версии для ПК, а на моб. устройствах?
Код для ПК:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><i class="fa fa-bars" aria-hidden="true"></i> Информация</button>
<div id="myDropdown" class="dropdown-content">
<a href="/o-nas">О нас</a>
<a href="/oplata">Оплата</a>
<a href="/dostavka">Доставка</a>
<a href="/kak-oformit-zakaz">Как оформить заказ</a>
<a href="news">Новости</a>
<a href="konsultaciya-po-okrashivaniyu">Консультация по окрашиванию</a>
<a href="/faq">Часто задаваемые вопросы</a>
</div>
</div>
Код для мобильных:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><i class="fa fa-bars" aria-hidden="true"></i> <span class="hidden-xs">Меню</span></button>
<div id="myDropdown" class="dropdown-content">
<a href="/o-nas">О нас</a>
<a href="/oplata">Оплата</a>
<a href="/dostavka">Доставка</a>
<a href="/kak-oformit-zakaz">Как оформить заказ</a>
<a href="news">Новости</a>
<a href="konsultaciya-po-okrashivaniyu">Консультация по окрашиванию</a>
<a href="/faq">Часто задаваемые вопросы</a>
</div>
</div>
CSS Если нужно
/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
background-image: none;
background-color: #df5c39;
}
/* Dropdown Button */
.dropbtn {
background-color: #EEEEEE;min-width:73px;
color: #000;
padding: 8px;margin-top:10px;margin-left:2px;
font-size: 16px;
border: none;
cursor: pointer;
}
.phonemobs {
color: #000;
font-size: 22px;
margin-top: 12px;
margin-bottom: 10px;
}
.phonemobs a {
color: #000;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
/*background-color: #7b3f00;*/
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
.responsive-menu-wrap .slicknav_btn {
padding: 28px 3px;
width: 65px;
left: 90px;
}
.responsive-menu-wrap .slicknav_nav {
width: 290px;
right: -9px;
left: 100px;
}
#slideshow0 {
max-width: 1600px;
}
@media (min-width: 1600px) {
#slideshow0 {
margin: 0 auto;
}
}
.c1600 {margin:0 auto;
}
@media (min-width: 1600px) {
.c1600 {
width: 1600px;
}
}
@media (max-width: 768px) {
#slideshow0 {
margin-top:-130px;
}
}
Простой
Простой
