Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 41
Tutorial para Criar um Menu Horizontal Simples

Neste tutorial veremos como criar um menu horizontal simples, entretanto você poderá adicionar mais itens e mudar os links. Este menu suspenso CSS3 posiciona seus submenus abaixo do cabeçalho pai para criar um efeito interessante quando eles são revelados. Os submenus deslizam por baixo como um plano de fundo animado, sobrepondo parcialmente os cabeçalhos de menu vizinhos. O resultado final é um menu suspenso com um toque visual exclusivo. Este menu também é compatível com dispositivos móveis. Em telas pequenas, o menu se expande para preencher toda a largura da página, facilitando a seleção dos links com o dedo.
Vejamos então um exemplo:
Exemplo: Nesse exemplo vamos utilizar apenas um arquivo para criar o nosso menu:
Arquivo menuHorizontalSimples.html:
<!DOCTYPE html> <html lang="en"> <head> <title>Menu Horizontal Simples</title> <link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css"> <style> .bgslidemenu { font: bold 16px 'Bitter', sans-serif; /* use google font */ position: relative; width: 100%; } .bgslidemenu:after { /* clear menu */ content: ''; clear: both; display: block; } .bgslidemenu ul { z-index: 100; margin: 0; padding: 0; position: relative; list-style: none; float: right; /* change to "left" to left align menu */ } .bgslidemenu ul li { position: relative; display: inline; margin-right: 20px; /* spacing between each top level menu item */ float: left; } .bgslidemenu ul li a { display: block; position: relative; color: white; padding: 14px 10px; color: black; text-decoration: none; } .bgslidemenu ul li a:link, .bgslidemenu ul li a:visited { color: black; } .bgslidemenu ul li:hover > a { color: purple !important; } .bgslidemenu ul li > a { /* add padding to accomodate arrow inside LIs */ padding-right: 25px; } .bgslidemenu ul li > a:only-child { /* undo padding for non submenu LIs */ padding-right: 10px; } .bgslidemenu ul li > a:after { /* add arrow inside LIs */ content: ""; position: absolute; height: 0; width: 0; border: 5px solid transparent; border-top-color: black; top: 50%; transform: translateY(-20%); right: 8px; } .bgslidemenu ul li > a:only-child:after { /* undo arrow for non submenu LIs */ display: none; } .bgslidemenu ul li ul { position: absolute; left: -5000px; top: auto; opacity: 0; width: 200px; /* width of drop down menus */ visibility: hidden; padding-top: 80px; /* Add large top padding to drop down menu */ z-index: -1; background: #F3F3F3; transform: translateY(100px); -webkit-transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s; transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s; } .bgslidemenu ul li:hover > ul { visibility: visible; left: -30px; transform: translateY(-80px); /* move drop down menu upwards (should be smaller than padding-top value above) */ opacity: 1; -webkit-transition: opacity 1s, transform .5s; transition: opacity 1s, transform .5s; } .bgslidemenu ul li ul li { display: list-item; float: none; overflow: hidden; } .bgslidemenu ul li ul li:after { content: ''; position: absolute; width: 30px; height: 5px; background: purple; left: 0; top: 50%; transform: translate3d(-100%, -50%, 0); transition: transform .3s; } .bgslidemenu ul ul li:hover:after { transform: translate3d(0, -50%, 0); } .bgslidemenu ul ul li:hover > a { color: purple !important; } .bgslidemenu ul li ul li a { font: normal 16px 'Bitter', sans-serif; padding: 10px; padding-left: 40px; position: relative; margin: 0; } @media (max-width: 700px) { .bgslidemenu ul { float: none; } .bgslidemenu ul li { position: relative; display: block; width: 100%; } .bgslidemenu ul li ul { width: 100%; position: relative; border-top: 2px solid #eee; display: none; } .bgslidemenu ul li:hover > ul { display: block; padding-top: 0; transform: none; z-index: 10000; left: 0 !important; top: auto; } .bgslidemenu ul ul li:hover > ul { left: 0 !important; top: auto; } } </style> <script src='/google_analytics_auto.js'></script></head> <body> <div class="bgslidemenu"> <ul> <li><a href="https://simuladosetutoriais.com/programas.html">Programas</a></li> <li><a href="javascript:vold(0)">Tutoriais</a> <ul> <li><a href="https://simuladosetutoriais.com/tut-python.html">Python</a></li> <li><a href="https://simuladosetutoriais.com/tut-java.html">Java</a></li> <li><a href="https://simuladosetutoriais.com/tut-jscript.html">JavaScript</a></li> <li><a href="https://simuladosetutoriais.com/tut-jquery.html">jQuery</a></li> <li><a href="https://simuladosetutoriais.com/tut-html.html">HTML</a></li> <li><a href="https://simuladosetutoriais.com/tut-php.html">PHP</a></li> <li><a href="https://simuladosetutoriais.com/tut-css.html">CSS</a></li> </ul> </li> <li><a href="https://simuladosetutoriais.com/livros.html">Livros</a></li> <li><a href="javascript:vold(0)">Simulados</a> <ul> <li><a href="https://simuladosetutoriais.com/simulado-jscript.html">JavaScript</a></li> <li><a href="https://simuladosetutoriais.com/simulado-python.html">Python</a></li> </ul> </li> <li><a href="https://simuladosetutoriais.com/contato.html">Contato</a></li> </ul> </div> </body> </html>
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Calcular o Índice de Massa Corporal
Tutorial para Criar uma Lista Suspensa de Imagens >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino