Menu Horizontal

schluters · Setembro 7, 2010

Olá pessoal, estou tentando implementar um menu horizontal em um site para meu irmão, mais estou com algumas duvidas, queria a ajuda do pessoal para criar o cód. css correto.

Imagem Postada

este é o menu.

ele vai ter o bg do menu em degrade, o que vai precisar de uma img e repeat-x, com os cantos arredondados, mais até ai tudo bem, consegui fazer, o problema esta em criar o botão que esta ativo.

tipo como esta ae na imagem, tendo em conta que os itens do menu tem nomes com tamanho diferentes, o botão não pode ser uma imagem só, vai ter de ser duas ou tres imagens, onde o meio possa se replicar ate fica com o tamanho do item desejado.

no exemplo usei o item "Home", que é uma palavra curta.

meu CSS:

/* TOPO */
#topo{

	}
/* MENU */
#menu{
	width:960px;
	font:bold 16px Arial, Helvetica, sans-serif;
	background:url(images/menu_bg.gif) repeat-x;
	margin:45px 0 0;
	position:absolute;
	z-index:9;
	}

/* NAV */
#nav{
	height:100px;
	background:url(images/menu_bg_esq.gif) no-repeat left bottom;
	}
#nav ul{
	background:url(images/menu_bg_dir.gif) no-repeat right bottom;
	float:right;
	}
#nav ul li{
	padding:30px 20px;
	display:inline;
	float:left;
	}
#nav ul li a{
	text-decoration:none;
	color:#fff;
	}
#nav .ativo{
	height:30px;
	margin:-10px 0 0 0;
	background:url(images/menu_ac_dir.gif) no-repeat right top;
	}
#nav .ativo span{
	padding:30px 0 30px 30px;
	background:url(images/menu_ac_esq.gif) no-repeat left top;
	}

#nav .ativo a{
	color:#222;
	}

já o HTML:

<div id="topo">
			<div id="logo">
				<a href="index.html" title="Cliente"><h1> GRUPO GTM</h1><img src="images/logo.gif" alt="Cliente" title="Cliente" /></a>
			</div><!-- FIM LOGO -->
			<div id="menu">
				<div id="nav">
					<ul>
						<li class="ativo"><span><a href="#" title="Home">Home</a></span></li>
						<li><a href="#" title="A Empresa">A Empresa</a></li>
						<li><a href="#" title="Serviços">Serviços</a></li>
						<li><a href="#" title="Dicas">Dicas</a></li>
						<li><a href="#" title="Contatos">Contatos</a></li>
					</ul>
				</div><!-- FIM NAV -->
			</div><!-- FIM MENU -->
		</div><!-- FIM TOPO -->

as imagens que recortei

Imagem Postada

Coloquei só a parte do cód que interessa, se precisar posto o restante...

aguardo algumas sugestões.

vlw, abraço

William Bruno · Setembro 7, 2010

desnecessário o uso do <span>

você não precisa de 3 imagens.. com apenas 2 dá pra resolver, logo apenas com o <a> e o <li> é possível.

veja a minha solução para este menu:

http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__p__1341165entry1341165

schluters · Setembro 7, 2010

Brother, seguindo os seus arquivo fiz o seguinte css:

/* NAV */
#nav{
	height:100px;
	background:url(images/menu_bg_esq.gif) no-repeat left bottom;
	}
#nav ul{
	background:url(images/menu_bg_dir.gif) no-repeat right bottom;
	float:right;
	}
#nav ul li{
	padding:30px 20px;
	display:inline;
	float:left;
	}
#nav ul li a{
	text-decoration:none;
	color:#fff;
	}
#nav a{
	color:#222;
	}
#listnav li{
	float: left;
	margin-left: 5px;
	height: 100px;
	}
#listnav li{
	color: #000;
	text-decoration: none;
	font-weight: bold;
	display: block;
	padding: 0 25px;
	height: 100px;
	line-height: 28px;
	text-align: center;
	}
* html #listnav li a {
        width: 100px;
}
body#home ul#listnav li.home,
body#empresa ul#listnav li.empresa,
body#servico ul#listnav li.servico,
body#dicas ul#listnav li.dicas,
body#contato ul#listnav li.contato{
	background: url(images/menu_ac_esq.gif) left top;
	}
body#home ul#listnav li.home a,
body#empresa ul#listnav li.empresa a,
body#servico ul#listnav li.servico a,
body#dicas ul#listnav li.dicas a,
body#contato ul#listnav li.contato a{
	background: url(images/menu_ac_dir.gif) no-repeat right top;
	}

E HTML:

<div id="menu">
				<div id="nav">
					<ul id="listnav">
						<li class="home"><a href="index.html" title="Home">Home</a></li>
						<li class="empresa"><a href="#" title="A Empresa">A Empresa</a></li>
						<li class="servico"><a href="#" title="Serviços">Serviços</a></li>
						<li class="dicas"><a href="#" title="Dicas">Dicas</a></li>
						<li class="contato"><a href="#" title="Contatos">Contatos</a></li>
					</ul>
				</div><!-- FIM NAV -->
			</div><!-- FIM MENU -->

mais continua não aparecendo, onde estou errando?

vlw, abraço...

schluters · Setembro 7, 2010

pra facilitar o entendimento este é o layout de como quero que fique.

[shot]http://i52.tinypic.com/2le5u2t.jpg[/shot]

usei as tag's menu, nav e a ul para criar o fundo com os cantos arredondados.

se precisar posto os cód. que já fiz, vlw!

William Bruno · Setembro 7, 2010

body#home ul#listnav li.home,
body#empresa ul#listnav li.empresa,
body#servico ul#listnav li.servico,
body#dicas ul#listnav li.dicas,
body#contato ul#listnav li.contato{

você está trocando:

... ? a cada página ?

poste um link do site, fica mais fácil

schluters · Setembro 7, 2010

estou com ele em localhost ainda, eu estava esquecendo da id no body, mais tem outra forma de implementar isso, pois pretendo usar um CMS para gerenciar o conteúdo, e vou ter que transformar este layout em um template.

ó como ficou...

Imagem Postada

Pretendo usar gpeasy, um cms bem simple e bem fácil de usar.

vou ter de trocar as UL e LI's pelo cód. php que o CMS gera, então vai ser dificiu ter de colocar id no body e nas UL's.

podes me ajudar com isso?

vlw!

William Bruno · Setembro 7, 2010

tá... a ideia era só que você entendesse como fazer com 2 imagens..

<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style: none;
	border: none;
}
body {
	font: 12px Arial, Verdana, sans-serif;
	padding: 50px;
	background: #666;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
#menu {
	background: url('faixa.gif') repeat-x left 10px;
	height: 81px;
}
#menu li {
	float: left;
	height: 81px;
}
#menu a {
	display: inline-block;
	padding: 10px 35px 0 35px;
	color: #fff;
	height: 100%;
	font-size: 16px;
	line-height: 71px;
}
#menu .atual {
	background: url('menu-li-left.jpg') no-repeat left top;
}
#menu .atual a {
	color: #000;
	background: url('menu-li-right.jpg') no-repeat right top;
}
</style>
</head>
<body>
	<ul id="menu">
		<li class="atual"><a href="">Home</a></li>
		<li><a href="">A Empresa</a></li>
		<li><a href="">Serviços</a></li>
		<li class="atual"><a href="">Dicas</a></li>
		<li><a href="">Contato</a></li>
		<li class="atual"><a href="">Bruno Rocha Moraes</a></li>
	</ul><!-- /menu -->
</body>
</html>

http://www.wbruno.com.br/scripts/menu/

schluters · Setembro 7, 2010

Ótimo brother, consegui fazer, descobri um padding em outra tag que estava me atrapalhando tambem...

vlw!

schluters · Setembro 12, 2010

Olá novamente, desculpa estar reabrindo o tópico, mais é que surgiu um novo problema.

Como disse acima, vou utilizar o layout em um CMS "gpEasy" pra ser mais direto.

O CMS coloca a classe ".selected" nos links do menu.

então não vou poder usar no "li" como você demonstrou ali em cima tbem.

Queria uma dica de como deve proceder, já que não vou ter outro seletor dentro do "<a href...>".

olha o cód que o cms gera:

<ul class="menu_top"><li> 
<a href="/gtm/index.php/" class="selected "  title="Home" >Home</a> 
</li><li> 
<a href="/gtm/index.php/A_Empresa"  title="A Empresa" >A Empresa</a> 
</li><li> 
<a href="/gtm/index.php/Serviços"  title="Serviços" >Serviços</a> 
</li><li> 
<a href="/gtm/index.php/Special_Blog"  title="Dicas" >Dicas</a> 
</li><li> 
<a href="/gtm/index.php/Special_Contact"  title="Contatos" >Contatos</a> 
</li> 
</ul>

William Bruno · Setembro 13, 2010

cara... tenta dar uma configurada nesse CMS, ou troca.. pq eita coisa horrível que ele fez ai =X

até WP tem na documentação, formas de você configurar o HTML que você quer...

realmente, fica muito, muito complicado fazer 'algo bom', com essa limitação.

Eu acho que eu trocaria de CMS :P (brincadeira).. mas tenta ver se dá pra ajustar o HTML que ele gera.

só com a class no <a>, vai ficar muito feia a solução..

schluters · Setembro 15, 2010

É, vou ter de recorrer a outro CMS msm, este é muito pratico para o usuário final, mais em questão de desenvolvimento ainda esta deixando a desejar...

Tem alguma sugestão de CMS muito simples e fácil para leigos.

Estava vendo o Get-Simple, parece ser fácil de trabalhar também, mais ainda não achei uma forma de instala-lo em localhost.

E queria algumas opiniões.

também estou com um problema no rodapé, mais vou lutar um pouco tentando aprender e se precisar crio outro tópico depois.

vlw, abraço.

Evandro Oliveira · Setembro 16, 2010

Movi para CMS's pois seu problema deixou de ser tocante a HTML+CSS.

Poste informações do projeto e sistema, como deseja que seja o formato do gerenciamento de conteúdo para que o pessoal da área possa te sugerir o CMS mais adequado.

schluters · Setembro 16, 2010

Opa, vlw Evandro, procuro um CMS que seja o mais simples para o cliente poder editar e add conteúdo ao site e de preferência que seja fácil de criar themas também.

Como o projeto é para um site institucional, que vai ter pouco conteúdo com raras atualizações, não há necessidade de um Banco de Dados "MySQL", "MS SQL", etc...

Pretendo usar o CMS em projetos futuros.

Como disse já estava dando uma olhada em alguns CMS's:

Get-Simple

SkyBlue Canvas

Frog

Mais quero a opinião de quem já usou ou já conhece um bom CMS para esse fim.

CMS's como Joomla, Drupal, MODx, 1024cms, xoops sei que são bons, mais tem muita função, o que acaba dificultando o cliente mais leigo.

Acho que é isso, se alguem tiver alguma sugestão e puder ajudar.

Arquivado

Menu Horizontal

Recommended Posts

schluters 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

schluters 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

schluters 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

schluters 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

schluters 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

schluters 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

schluters 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

schluters 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Fóruns

Tempo Real

Informação importante