Enable mobile browsers' zoom feature in dropdown

Question

There is the possibility to simulate the 'zoom' that mobile browsers implement in select, in a dropdown?

Ex: When the user clicks on a select, the browser itself creates a modal, making the user able to select the desired option in a much easier way.

Answer 1

One way is to create a false element, with the appearance of a dropdpwn / select but actually does nothing, that is, being something 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 fake select if there is a click event, you must then display another element responsible for covering the entire page. In this other element will be displayed the options that the select could 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 shown hidden), such a 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, just include the class .visible in the same element with Javascript. As you said you have no problems using jQuery, follow an example (with the above rules) 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>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>


<div id='abrir' class='fake-dropdown'>
    Selecione uma opção <i class="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>