CSS - Criar menus horizontais/verticais  TOPIC_SOLVED

Topics Programming. Not necessarily about the BrazilFW!

CSS - Criar menus horizontais/verticais

Mensagempor apoliano » Qui Mar 07, 2013 4:31 pm

Boa tarde galera!

Criando menus com css, mais não tá dando o resultado esperado.
Tá aqui o index.php:
Código: Selecionar todos
<html>
<header>
   <title>Menu em CSS</title>
   <link href="css/estilos.css" rel="stylesheet" type="text/css" />
</header>
<body>
   <div id="menu">
      <ul class="nav">
         <li><a href="#">Menu 1</a></li>
         <ul>
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
         </ul>
      </ul>
      <ul class="nav">
         <li><a href="#">Menu 2</a></li>
         <ul>
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
         </ul>
      </ul>
      <ul class="nav">
         <li><a href="#">Menu 3</a></li>
         <ul>
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
         </ul>
      </ul>
      <ul class="nav">
         <li><a href="#">Menu 4</a></li>
         <ul>
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
         </ul>
      </ul>
   </div>
</body>
</html>

Aqui o estilos.css:
Código: Selecionar todos
/*Resetando todos os itens de menu*/
* {
   margin: 0;
   padding: 0;
}
/*Formatando o menu principal*/
#menu {
   margin: auto;
   width: 500px;
   font-family: arial, verdana;
}
/*Formatando as lista de menus*/
ul, ol {
   list-style: none;
}
/*Criando uma classe para formatar os links e sublinks dos menus*/
.nav li a {
   background-color: #CCCCCC;
   color: #0066FF;
   text-decoration: none;
   padding: 10px 15px;
   display: block;
}
/*Adicionando uma cor de fundo ao passar o mouse sobre algum menu e/ou submenu*/
.nav li a:hover{
   background-color: #FF9900;
}
/*Alindo os sub-menus*/
.nav > li {
   float: left;
}
/*Ocultando os sub-menus*/
.nav li ul{
   display: none;
   position: absolute;
   min-width: 150px;
}
/*Exibindo sub-menus ao passar o mouse sobre o menu*/
.nav li:hover > ul{
   display: none;
}
/*Colocando sub-menus de sub-menus ao lado direito*/
.nav li ul li {
   position: relative;
}

.nav li ul li ul {
   right:-150px;
   top: 0px;
}

O menu que eu quero criar, é igual ao menu do BFW, se possível alguém testa aí. :o!

Aqui eu não conseguie esconder os sub-menus e nem alinhar os sub-menus. >| >|
Apoliano Sousa "técnico em Informática" aprendendo linux...
A cada dia meu conhecimento aumenta um pouco mais.
Avatar do usuário
apoliano
BFW Experienced
 
Mensagens: 798
Registrado em: Ter Dez 13, 2011 4:40 pm
Localização: Ubajara-CE
BrazilFW Box: Intel(R) Celeron(R) CPU 420 @ (1x) 1.608 GHz
946.96 MB DDR2 HD 80 Gb SATA
BFW 3.0.260 32 bits - squid - mac x ip - Mysql - phpmyadmin

Re: CSS - Criar menus horizontais/verticais

Mensagempor gerardonoh » Qui Mar 07, 2013 7:10 pm

menu horizontal css con
menu1
--Submenu
-----submenu del submenu

Código: Selecionar todos
*{margin: 5; padding: 0;}
#menu{
position: absolute;
z-index:5;

width:785px;
margin: 0 auto;
background-color: #000; height:35px;
background-image: linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);
background-image: -o-linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);
background-image: -moz-linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);
background-image: -webkit-linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);
background-image: -ms-linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);

background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0.04, rgb(38,43,40)),
   color-stop(0.52, rgb(26,120,26))
);
}
#menu ul{list-style-type:none;}
#menu ul li{float: left; position: relative;}
#menu ul li:hover{background-color: green;}
#menu ul li a{color: #fff; padding: 0 30px; line-height:25px; font-size:11px; font-family:arial; display: block; text-decoration:none;}
#menu ul li a:hover{background-color: green;}
#menu ul li ul li{float: none; position: relative;}

#menu ul li ul{
position: absolute;
 top:25px; left:0;
 display: none;
 background-color: #000;
 background-image: linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);
background-image: -o-linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);
background-image: -moz-linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);
background-image: -webkit-linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);
background-image: -ms-linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);

background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0.04, rgb(38,43,40)),
   color-stop(0.52, rgb(26,120,26))
);
 width:150px;
 }
#menu ul li:hover > ul{display: block;}
#menu ul li ul li a{white-space: nowrap; line-height:25px;}
#menu ul li ul li ul{/*submenus 2 nivel*/
z-index:5;
position: absolute;
top:0; left:145px;
display: none;
background-color: #000; width:150px;
background-image: linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);
background-image: -o-linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);
background-image: -moz-linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);
background-image: -webkit-linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);
background-image: -ms-linear-gradient(bottom, rgb(38,43,40) 4%, rgb(26,120,26) 52%);

background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0.04, rgb(38,43,40)),
   color-stop(0.52, rgb(26,120,26))
);
}


y lo usas asi:
Código: Selecionar todos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
.....etc
... etc
</head>
<html>
..... etc
<body>
<div id="menu">
<ul >
      <!--<li ><a href=""title="Inicio">Inicio</a></li>!-->
      <!--<li ><a >Cat&aacute;logos </a>
            <ul>
            <li><a href="#catalogo_equipos" id="catalogo_equipos" Title="Mantenimiento: altas, modificaciones, bajas, etc ...">Equipos</a></li>
            <li><a href="#catalogo_usuarios" id="catalogo_usuarios">Usuarios</a></li>
            <li><a >Categorias</a></li>
            </ul>
      </li>!-->
      <li><a title="Prestamo y Recepcion de equipos">Consulta de equipos</a>
            <ul>
            <!--<li><a href="#ver_equipos_disponibles"id="ver_equipos_disponibles">Disponibles</a></li>
            <li><a href="#ver_equipos_prestados"id="ver_equipos_prestados">Prestados</a></li>!-->
            <li><a href="#equipos_disponibles"id="equipos_disponibles">Disponibles</a></li>
            <li><a href="#equipos_prestados"id="equipos_prestados">Prestados</a></li>
            </ul>
      </li>
      <!--<li ><a href=""title="">Historial</a>
            <ul>
            <li><a href="#historial_salidas" id="historial_salidas" title="Ver historial salida de equipos / prestamos">Salida-equipos</a></li>
            <li><a href="#historial_entradas" id="historial_entradas" title="Ver historial de equipos recibidos">Recepci&oacute;n-equipos</a></li>
            </ul>
      </li>
      <li><a href="" id="reportes" title="Impresion de Reportes">Reportes</a></li>!-->

      <li><a title="Texto">Contacto</a>
            <ul>
            <li><a href=""title="">Soporte:Angela M.T.A. - GNP</a></li>   
            </ul>
      </li>
      <li><a href="" id="cambiar_password" title="Cambiar contrase&ntilde;a">Contrase&ntilde;a</a></li>
      <li><a href="" id="salir" title="Cerrar Sesion del usuario">Salir</a></li>
</ul>
</body>
</html>

:o!
Avatar do usuário
gerardonoh
BFW Beneméritos
 
Mensagens: 162
Registrado em: Qui Set 22, 2011 2:35 am
BrazilFW Box: P4 D-core 4gb
500 gb Hd
brazilfw : 3.0.261 64 Bits
dansguardian, X-YouTube-Edu-Filter
Implementado: Univesidad para 250-300 usuarios
3 adsl-Load Balancing

Re: CSS - Criar menus horizontais/verticais

Mensagempor apoliano » Sex Mar 08, 2013 4:32 pm

Boa tarde galera!

Conseguie estruturar uma parte do menu, vejam a imagem abaixo:
Imagem
Link de download da imagem se não conseguirem vissualizá-la => http://www.4shared.com/photo/TxkAPeqx/menu.html

Agora o que to tentando fazer e não conseguie ainda é, ajustar o tamanho dos campos do menu principal sem alterar
o tamanho dos campos dos sub-menus.

É isso que quero ajustar agora, alguma dica aí?

menu.css, para editar os menus:
Código: Selecionar todos
/*Resetando todos os itens de menu*/
* {
   margin: 0;
   padding: 0;
}
/*Adicionando um espaço entre o top do browser e área do banner*/
#container {
   padding-top: 10px;
}
/*Formatando menus*/
#menu {
   float: left;
   width: 850;
   height: 30;
   background-image: url(../imagens/menu_nav.png);
   border-bottom: 2px solid #ffffff;
   line-height: 30px;
}
/*Formatando itens de lista do menu*/
#menu li {
   list-style: none;
   float: left;
   position: relative;
   background-image: url(../imagens/menu_nav.png);
}
/*Formatando os itens e links do menu*/
#menu ul li a {
   color: #000;
   text-decoration: none;
   width: 140px;
   height: 30px;
   display: block;
   text-align: left;
   border-left: 2px solid #CCCCCC;
   text-shadow: 1px 1px 1px #0000;
}
/*Formatando e escondendo sub-menuss*/
#menu ul ul {
   position: absolute;
   top: 30px;
   visibility: hidden;
}
/*Formatando sub-menus*/
#menu ul li:hover ul {
   visibility: visible;
   
}
/*FAdicionando imagem de fundo menus primário*/
#menu li:hover {
   background-image: url(../imagens/menu_fundo.png);
}
/*FAdicionando imagem de fundo sub-menus*/
#menu ul li ul a:hover {
   color: #000;
   background-image: url(../imagens/menu_fundo.png);
}

template.css, edição do tema:
Código: Selecionar todos
#container {
   width:850px;
   height: 400px;
   margin: 0 auto;
}
/*Logo da empresa*/
#logo {
   width: 190px;
   height: 100px;
   padding: 5px;
   padding-top: 15px;
}
/*Botão sair do sistema*/
#sair {
   text-align: center;
}
/*Cabeçalho do site*/
#banner {
   margin: 0 auto;
   width: 850px;
   height: 110px;
   background-image: url(../imagens/banner.png);
   border-bottom: 2px solid #ffffff;
}
/*Barra lateral esquerda*/
#menu {
   float: left;
   width: 850;
   height: 25;
   background-image: url(../imagens/menu_nav.png);
   border-bottom: 2px solid #ffffff;
}
/*Corpo - conteudo do site*/
#corpo {
   margin: auto;
   height: 440px;
   background-color: #FFFFFF;
   text-align: center;
}
/*Roda-pe do site
#rodape {
   clear: both;
   height: 55px;
   background-image: url(../imagens/footer.png);
   text-align: center;
   line-height: 60px;
   border-top: 2px solid #ffffff;
}
*/

index.php, página inicial home:
Código: Selecionar todos
<?php
   include "config/restringir.php";
?>
<html>
<head>
   <title>S.A.A.T - Painel de Administração</title>
   <link href="css/template.css" rel="stylesheet" type="text/css" />
   <link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
   <div id="banner">
      <div id="logo"><img src="imagens/logo-provedor.png"></img></div>
   </div>
   <div id="menu">
   <ul>
      <li>
         <a href="#">&nbsp;Sistema</a>
         <ul>
         <li><a href="logout.php">&nbsp;Sair do Sistema</a></li>
         </ul>
      </li>
   </ul>
   <ul>
      <li>
         <a href="#">&nbsp;Clientes</a>
         <ul>
         <li><a href="clientes/cadastro.php">&nbsp;Cadastrar Clientes</a></li>
         <li><a href="#">&nbsp;Alterar Cadastro</a></li>
         <li><a href="#">&nbsp;Relatórios de Clientes</a></li>
         </ul>
      </li>
   </ul>
   </div>
   
   <div id="corpo">Aqui é o conteúdo do site..</div>
   <!--<div id="rodape">&copy; 2013 - Sistema Administração Assistência Técnica.</div>-->
</div>
</body>
</html>

O tamanho de largura desses campos é de 140px, bom tamanho para os sub-menus, mais para o menu orincipal item pai é muito grande
para o tamanho dos nomes que tem lá. >| >|
Apoliano Sousa "técnico em Informática" aprendendo linux...
A cada dia meu conhecimento aumenta um pouco mais.
Avatar do usuário
apoliano
BFW Experienced
 
Mensagens: 798
Registrado em: Ter Dez 13, 2011 4:40 pm
Localização: Ubajara-CE
BrazilFW Box: Intel(R) Celeron(R) CPU 420 @ (1x) 1.608 GHz
946.96 MB DDR2 HD 80 Gb SATA
BFW 3.0.260 32 bits - squid - mac x ip - Mysql - phpmyadmin

Re: CSS - Criar menus horizontais/verticais  TOPIC_SOLVED

Mensagempor apoliano » Dom Mar 10, 2013 12:02 pm

Bom dia galera!

Inserindo essas linhas de códigos conseguie modificar o tamanho do menu principal Sistema, sem alterar o tamanho do sub-menu Sair do Sistema.
E o outros menus que forem criados.
Código: Selecionar todos
/*Ajustar tamanho do menu principal*/
#menu ul{
   width: 100px;
   float: left;
   top: 30px;
}

O código CSS agora ficou assim:
Código: Selecionar todos
/*Resetando todos os itens de menu*/
* {
   margin: 0;
   padding: 0;
}
/*Adicionando um espaço entre o top do browser e área do banner*/
#container {
   padding-top: 10px;
}
/*Formatando menus*/
#menu {
   float: left;
   width: 850;
   height: 30;
   background-image: url(../imagens/menu_nav.png);
   border-bottom: 2px solid #ffffff;
   line-height: 30px;
}
/*Formatando itens de lista do menu*/
#menu li {
   list-style: none;
   float: left;
   position: relative;
   background-image: url(../imagens/menu_nav.png);
}
/*Ajustar tamanho do menu principal*/
#menu ul{
   width: 10%;
   float: left;
   top: 30px;
}
/*Formatando os itens e links do menu*/
#menu ul li a {
   color: #000;
   text-decoration: none;
   width: 180px;
   height: 30px;
   display: block;
   text-align: left;
   border-left: 2px solid #CCCCCC;
   text-shadow: 1px 1px 1px #0000;
}
/*Formatando e escondendo sub-menuss*/
#menu ul ul {
   position: absolute;
   top: 30px;
   visibility: hidden;
}
/*Formatando sub-menus*/
#menu ul li:hover ul {
   visibility: visible;
   
}
/*Adicionando imagem de fundo menus primário*/
#menu li:hover {
   background-image: url(../imagens/menu_fundo.png);
}
/*FAdicionando imagem de fundo sub-menus*/
#menu ul li ul a:hover {
   color: #000;
   background-image: url(../imagens/menu_fundo.png);
}

Esse parte resolvido. :o!
Apoliano Sousa "técnico em Informática" aprendendo linux...
A cada dia meu conhecimento aumenta um pouco mais.
Avatar do usuário
apoliano
BFW Experienced
 
Mensagens: 798
Registrado em: Ter Dez 13, 2011 4:40 pm
Localização: Ubajara-CE
BrazilFW Box: Intel(R) Celeron(R) CPU 420 @ (1x) 1.608 GHz
946.96 MB DDR2 HD 80 Gb SATA
BFW 3.0.260 32 bits - squid - mac x ip - Mysql - phpmyadmin


Voltar para Programming

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado e 2 visitantes

cron