Menu horizontal.

Victor Barbosa · Julho 21, 2014

Pessoal, estou tendo um problema com CSS.

Ao passar o mouse sobre aquela barra escura, ela se expande ficando como na imagem seguinte (o cursor não está aparecendo no print):

HTML:

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Aprenda Online</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
		<div id="menu_topo">
			<div id="img_menu"></div><h1>Aprenda Online</h1>
				
		</div>
		
		<div id="conteudo">
			<h1>Titulo do artigo</h1>
			<p>Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto </p>
			<p>Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto </p>
			<p>Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto </p>
			<p>Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto 
				Texto Texto Texto Texto Texto Texto </p>

		</div>
		<div id="barra_lateral">
			<form>
				<div class="form">
					<div class="form-group">
						<label>Nome de Usuario:</label>
						<input class="form-control" type="text" name="usuario" placeholder="Digite o nome de usuario">
					</div>
					<div class="form-group">
						<label>Senha:</label>
						<input class="form-control" type="password" name="senha" placeholder="Digite a senha">
					</div>
					<input class="btn btn-success" type="submit" value="Logar">
					<input class="btn btn-danger" type="reset" value="Limpar">
				</div>
			</form>	
		</div>

		<div id="creditos">
			
		</div>
	</body>
</html>

CSS:

*{
	margin: 0px;
	padding: 0px;
	text-decoration: none;
}
body{
	background-color: #49C5BF;
}
p{
	margin: 20px;
	font-family: verdana;
	font-size: 16px;
	color: #000;
}

#conteudo{
	margin-top: 90px;
	margin-left: 70px;
	margin-bottom: 27px;
	height: 400px;
	width: 650px;
	float: left;
	background-color: #fff;
}		
#conteudo h1{
	margin: 30px;
}
#barra_lateral{
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 90px;
	height: 400px;
	width: 350px;
	position: static;
	float: right;
	background-color: #fff;
}
#creditos{
	height: 40px;
	width: 100%;
	float: left;
	background-color: #000;
}
.btn{
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}
.btn-success{
	color:#fff;
	background-color:#5cb85c;
	border-color:#4cae4c
}
input{
	margin-left: 20px;
}
.form-control {
	display: block;
	width: 80%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.btn-danger {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
}
.form-group {
	margin-bottom: 15px;
}
label {
	margin-left: 20px;
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: 700;
}
.form{
	margin-top: 30px;
}


/* MENU HORIZONTAL */

#img_menu{
	width: 70px;
	height: 70px;
	background-image: url('../icons/icon_menu.png'); 
	margin-left: 5px;
	float: left; 
}
#menu_topo{
	margin-top: 0px;
	height: 70px;
	width: 280px;
	float: top;
	background-color: #000;
	position: fixed;
	overflow:hidden;
	transition: all 1.7s;
	border-radius: 0px 0px 30px;
}
#menu_topo h1{
	font-size: 27px;
	color: #fff;
	margin-top: 20px;
	margin-left:10px; 
}
#menu_topo:hover{
	width: 100%;
	border-radius: 0px;
}

Eu só não consigo colocar um menu no canto direito daquela barra quando expandida.
Alguém pode me ajudar?

lokaodomau · Julho 21, 2014

Coloca dentro de uma DIV#menu_content com [inline]display:none;[/inline] e [inline]#menu_topo:hover #menu_content { display:block; }[/inline]

Victor Barbosa · Julho 21, 2014

Coloca dentro de uma DIV#menu_content com [inline]display:none;[/inline] e [inline]#menu_topo:hover #menu_content { display:block; }[/inline]

Como faço para o <li> <a> ficar mais ou menos como o deste blog: http://blogtecworld.blogspot.com.br/ ?

Marlon Pacheco · Julho 21, 2014

li a:hover {
  background: #COR;
}

Isso?

Victor Barbosa · Julho 21, 2014

li a:hover {
  background: #COR;
}

Isso?

Não, o link não esta ocupando toda altura que resta, não estou conseguindo fazer isso...

Marlon Pacheco · Julho 21, 2014

Ah, aí tem várias maneiras de fazer. Aumentar o padding do a, setar o line-height do a, etc...

Victor Barbosa · Julho 21, 2014

Ah, aí tem várias maneiras de fazer. Aumentar o padding do a, setar o line-height do a, etc...

pode me ajudar com isso?

victorqueiroz · Julho 23, 2014

da uma olhada nesse artigo:

http://tableless.com.br/criando-um-menu-horizontal-com-css/

Victor Barbosa · Julho 24, 2014

da uma olhada nesse artigo:

http://tableless.com.br/criando-um-menu-horizontal-com-css/

E agora? como faço pra lista ocupar em altura, todo o espaço da barra?

/* MENU HORIZONTAL */

#img_menu{
	width: 70px;
	height: 70px;
	background-image: url('../icons/icon_menu.png'); 
	margin-left: 5px;
	float: left; 
}
#barra{
	margin-top: 0px;
	height: 70px;
	width: 280px;
	float: top;
	background-color: #000;
	position: fixed;
	overflow:hidden;
	transition: all 1.7s;
	border-radius: 0px 0px 30px;
}
#barra h1{
	font-size: 27px;
	color: #fff;
	margin-top: 20px;
	margin-left:10px; 
}
#barra:hover{
	width: 100%;
	border-radius: 0px;
}


#menu ul {
	padding:0px;
    margin:0px;
    background-color:#EDEDED;
    list-style:none;
    float: right;
    display: none;
}

#barra:hover #menu ul{
	display: block;
}

#menu ul li { display: inline; }
#menu ul li a {
    padding: 2px 20px;
    display: inline-block;
    height: 100%; 
    /* visual do link */
    background-color:#EDEDED;
    color: #333;
    text-decoration: none;
    border-bottom:3px solid #EDEDED;

}
#menu ul li a:hover {
    background-color:#D6D6D6;
    color: #6D6D6D;
    border-bottom:3px solid #EA0000;
}

victorqueiroz · Julho 24, 2014

aumenta o padding top e bottom :)

Victor Barbosa · Julho 24, 2014

aumenta o padding top e bottom :)

ainda assim só ocupa aquele espaço, parece que esta limitado, não sobe mais

Marlon Pacheco · Julho 25, 2014

O melhor é você colocar o efeito hover diretamente no <li>. O elemento <a>, por ser um elemento de linha, não aceita muito fácil a definição de altura.

Caso não consiga fazer o li:hover, você pode aumentar a line-height do elemento <a>.

Algo tipo:

a {line-height: 30px;}

victorqueiroz · Julho 25, 2014

Testa assim:

#menu ul {
padding-top:20px;
padding-bottom:20px;
margin:0px;
background-color:#EDEDED;
list-style:none;
float: right;
display: none;
}

#menu ul li { display: inline; padding-top:20px; padding-bottom:20px; }

Victor Barbosa · Julho 26, 2014

Consegui pessoal, o problema era que o <h1> da barra não tinha um "float:left".
Valeu, ajudaram bastante!

victorqueiroz · Julho 26, 2014

Que bom que conseguiu! :)

Arquivado

Menu horizontal.

Recommended Posts

Victor Barbosa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

lokaodomau 61

Compartilhar este post

Link para o post

Compartilhar em outros sites

Victor Barbosa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Pacheco 132

Compartilhar este post

Link para o post

Compartilhar em outros sites

Victor Barbosa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Pacheco 132

Compartilhar este post

Link para o post

Compartilhar em outros sites

Victor Barbosa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

victorqueiroz 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

Victor Barbosa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

victorqueiroz 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

Victor Barbosa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Pacheco 132

Compartilhar este post

Link para o post

Compartilhar em outros sites

victorqueiroz 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

Victor Barbosa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

victorqueiroz 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante