Menu Horizontal

[schluters 0]

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.

 

 

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

 

 

 

 

 

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

 

aguardo algumas sugestões.

 

vlw, abraço

[William Bruno 1501]

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 0]

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 0]

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 1501]

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:

 

<body id="home">

<body id="empresa">

 

... ? a cada página ?

 

poste um link do site, fica mais fácil

[schluters 0]

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...

 

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 1501]

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 0]

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

 

vlw!

[schluters 0]

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 1501]

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 0]

É, 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 331]

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 0]

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.