1
эй, у меня проблемы с мобильным телефоном. это мой сайт: dev siteИсправить позицию div для мобильных устройств со средствами массовой информации
Сегодня я создал выпадающее меню с флагами, поэтому я могу переключиться на разные языки. проблема в том, что выпадающее меню для мобильных устройств находится под навигационной панелью гамбургера ... Я думал о том, чтобы решить это с помощью медиа-запросов (потому что это происходит только в мобильном телефоне) поможет кому-нибудь?
вот код:
<div class="navbar-header">
<button type="button" id="navbar-toggle" class="navbar-toggle" data-toggle="collapseX" data-target=".navbar-responsive-collapseX"
style="margin-top: 0px;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--try for flag dropdown menu-->
<!--position the dropdown in it's place in the navbar-->
<div class="image-dropdown" id="image-dropdown" style=" float: right; position: relative; top: 30px;width: 45px;">
<a href="http://www.uprightpose.com/">
<input checked="checked" type="radio" id="line1" name="line-style" value="1" onclick='window.location="http://www.uprightpose.com/";' />
<!--hyperlink to the language page-->
<label for="line1"></label>
</a>
<a href="http://www.uprightpose.com/home-es-new/">
<input type="radio" id="line2" name="line-style" value="2" onclick='window.location="http://www.uprightpose.com/home-es-new/";' />
<label for="line2"></label>
</a>
</div>
<!--end of flag dropdown menu-->
и это CSS:
<style>
#image-dropdown {
/*style the "box" in its minimzed state*/
width:80px; height:50px; overflow:hidden;
/*animate collapsing the dropdown from open to closed state (v. fast)*/
-moz-transition: height 0.1s;
-webkit-transition: height 0.1s;
-ms-transition: height 0.1s;
-o-transition: height 0.1s;
transition: height 0.1s;
}
#image-dropdown:hover {
height:200px; /*overflow-y:scroll;*/
/*nice and smooth expand - speed this up at your preference or remove animation altogether*/
-moz-transition: height 0.5s;
-webkit-transition: height 0.5s;
-ms-transition: height 0.5s;
-o-transition: height 0.5s;
transition: height 0.5s;
}
#image-dropdown input {
/*hide the nasty default radio buttons. like, completely!*/
position:absolute;top:0;left:0;opacity:0;
}
#image-dropdown label[for="line1"] {
/*style the labels to look like dropdown options, kinda*/
display:none; margin:2px; height:46px; opacity:0.2;
/*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
background:url("https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg");
background-size: 40px;
background-repeat: no-repeat;
border-radius: 7px;
width: 40px;
height: 30px;
}
#image-dropdown label[for="line2"] {
/*style the labels to look like dropdown options, kinda*/
display:none; margin:2px; height:46px; opacity:0.7;
/*setting correct backgrounds - add additional rules with selectors based on "for" attribute*/
background:url("https://lipis.github.io/flag-icon-css/flags/4x3/es.svg");
background-size: 40px;
background-repeat: no-repeat;
border-radius: 7px;
width: 40px;
height: 30px;
}
#image-dropdown:hover label{
/*this is how labels render in the "expanded" state. we want to see only the selected radio button in the collapsed menu, and all of them when expanded*/
display:block;
}
#image-dropdown label:hover {
opacity:0.5;
}
#image-dropdown input:checked + label {
/*tricky! labels immediately following a checked radio button (with our markup they are semantically related) should be fully opaque regardless of hover, and they should always be visible (i.e. even in the collapsed menu*/
opacity:1 !important; display:block;
}
/*pfft, nothing as cool here, just the value trace*/
#trace {margin:0 0 20px;}
</style>
Нам нужен код, или что-то, что является редактируемым чтобы помочь вам в любом случае посмотреть здесь: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp – Teshtek
хорошо, я редактирую свой вопрос, знаю, хотя я не уверен, насколько это вам поможет ... –
Итак, где вы хотите поместить выпадающее меню? Во всяком случае, это около гамбургера, а не под: http://i.imgur.com/1lqVrgX.png – Teshtek