Is it possible to simulate the 'zoom' that mobile browsers implement in select , in dropdown ?
Ex: When the user clicks a select , the browser itself creates a modal, allowing the user to select the desired option in a much easier way.
One way is to create a fake element that looks like a dropdpwn / select but actually does nothing, that is, it is only visual. For example:
.fake-dropdown {
border: 2px solid #ccc;
border-radius: 5px;
color: #888;
cursor: pointer;
padding: 8px;
max-width: 220px;
}
.fake-dropdown > i {
float: right
}<!--
incluindo o 'font awesome' somente para mostrar uma seta para baixo no
'select / dropdown'
-->
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>
<div class='fake-dropdown'>
Selecione uma opção <i class="fa fa-caret-down"></i>
</div>When this false select has a click event, it should then display another element responsible for covering the entire page. In this other element the options that select might have. For example:
ul{list-style:none}
a{text-decoration: none}
.dropdown-content {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
background: #333;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
justify-content: center;
}
.dropdown-content li a {
color: #fff;
font-size: 1.5em;
}
.dropdown-content li:first-child a {
border-bottom: 1px solid #31b0d5
}<div class='dropdown-content'>
<nav>
<ul>
<li><a id='fechar' href='#'>Fechar dropdown</a>
<li><a href='#'>Início</a></li>
<li><a href='#'>Calcular rota</a></li>
<li><a href='#'>Mostrar rota mais rápido</a></li>
<li><a href='#'>Mostrar rota mais econômica</a></li>
</ul>
</nav>
</div>Then you can create a class responsible for showing the contents of this dropdown (which will first be hidden), this class may contain the following rules:
.dropdown-content {
/*... as demais regras, mostradas acima */
/* as duas abaixo é para exibir o elemento escondido e,
atrás do conteúdo da página*/
visibility: hidden;
z-index: -999;
}
.visible {
visibility: visible;
z-index: 0;
}
To display the content of dropdown-content , simply include the .visible class in the same Javascript element. As you said you have no problem using jQuery, here's an example (with the rules above) working:
$(function(){
$("#abrir,#fechar").on('click', function(){
$('.dropdown-content').toggleClass('visible');
});
});*{margin: 0;padding:0}
ul{list-style:none}
a{text-decoration: none}
.fake-dropdown {
border: 2px solid #ccc;
border-radius: 5px;
color: #888;
cursor: pointer;
padding: 8px;
max-width: 220px;
}
.fake-dropdown > i {
float: right
}
.dropdown-content {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
background: #333;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
justify-content: center;
visibility: hidden;
z-index: -999;
}
.dropdown-content li a {
color: #fff;
font-size: 1.5em;
}
.dropdown-content li:first-child a {
border-bottom: 1px solid #31b0d5
}
.visible {
visibility: visible;
z-index: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script><linkrel='stylesheet'href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/><divid='abrir'class='fake-dropdown'>Selecioneumaopção<iclass="fa fa-caret-down"></i>
</div>
<div class='dropdown-content'>
<nav>
<ul>
<li><a id='fechar' href='#'>Fechar dropdown</a>
<li><a href='#'>Início</a></li>
<li><a href='#'>Calcular rota</a></li>
<li><a href='#'>Mostrar rota mais rápido</a></li>
<li><a href='#'>Mostrar rota mais econômica</a></li>
</ul>
</nav>
</div>