Menu que acompanha site.

Front-end

13/06/2015

No Wordpress sei que existe um pluggin, mas tem como fazer apenas com HTML e CSS?

[img]http://arquivo.devmedia.com.br/forum/imagem/310412-20150613-162040.jpg[/img]
Marcio Araujo

Marcio Araujo

Curtidas 0

Respostas

Giluan Souza

Giluan Souza

13/06/2015

Apenas com css use position:fixed,
agora se quiser algum efeito no menu ao rolar a página use jQuery.
GOSTEI 0
Marcio Araujo

Marcio Araujo

13/06/2015

Não deu certo....

http://www.w3.org/Style/Examples/007/menus
GOSTEI 0
Giluan Souza

Giluan Souza

13/06/2015

Qual foi o erro?
O que você já fez até agora?
Poste seu código.
GOSTEI 0
Marcio Araujo

Marcio Araujo

13/06/2015


<html>
	<head>
		<title>TESTE MENU</title>
		
		<link href="estilo01.css" rel="stylesheet" type="text/css"		
	</head>
	<body>
	oalalaalalalalalalalalallalalalalalalalalalalallalala
		<ul id=menu>
			<li><a href="#L384">Section 1</a>
			<li><a href="#details">Section 2</a>
			<li><a href="#FAQ">Section 3</a>
		</ul>
		
	</body>
</html>



css


#menu {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}
GOSTEI 0
Randrade

Randrade

13/06/2015

Marcio, apenas copiei seu código e funcionou.

Olha ele [url:descricao=rodando no JsFiddle aqui!]http://jsfiddle.net/randrade/7wd342kh/[/url]

P.S.: Feche cada item da lista com a tag </li>.
GOSTEI 0
Marcio Araujo

Marcio Araujo

13/06/2015

É pq está na vertical, queria na horizontal, acho que esqueci algo.
GOSTEI 0
Randrade

Randrade

13/06/2015

É pq está na vertical, queria na horizontal, acho que esqueci algo.


Para isso basta alterar um pouco o css.

Olha um exemplo aqui

Mas, se quiser algo melhor, utilize o Bootstrap. Ele possui uma gama de recursos que podem lhe auxiliar.
GOSTEI 0
Marcio Araujo

Marcio Araujo

13/06/2015

Vou atrás Randrade, obrigado Randrade.
GOSTEI 0
Marcio Araujo

Marcio Araujo

13/06/2015

Vou atrás Randrade, obrigado Randrade.
GOSTEI 0
Gabriela Monte

Gabriela Monte

13/06/2015

Qual o nome especifico para esse tipo de MENU? Queria fazer umas pesquisas sobre o assunto.
GOSTEI 0
Randrade

Randrade

13/06/2015

Qual o nome especifico para esse tipo de MENU? Queria fazer umas pesquisas sobre o assunto.


Gabriela, é o mesmo que discutimos [url:descricao=nesse tópico]https://www.devmedia.com.br/forum/codigo-fonte-site-devmedia/521057[/url]. Apenas com modificação no CSS.
GOSTEI 0
Gabriela Monte

Gabriela Monte

13/06/2015

É o Navbar?
GOSTEI 0
Randrade

Randrade

13/06/2015

É o Navbar?


No Bootstrap, sim.

Porém, para deixar algum atributo fixo, basta adicionar isso em seu css.
  position: fixed;


Muitos sites não utilizam o bootstrap com esse recurso, e alguns que utilizam, alteram o css para adequar com o site.

Esse exemplo mostra o mesmo menu, porém de formas diferentes. Olhe ele, utiliza oF12 de seu browser, e veja as diferenças de um para outro.
GOSTEI 0
Gabriela Monte

Gabriela Monte

13/06/2015

Achei algumas informações - código.


.navbar-static-top {
  margin-bottom: 19px;
}
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
@media (min-width: 768px)
.navbar-static-top {
  border-radius: 0;
}
.navbar-static-top {
  z-index: 1000;
  border-width: 0 0 1px;
}
GOSTEI 0
Randrade

Randrade

13/06/2015

Achei algumas informações - código.


.navbar-static-top {
  margin-bottom: 19px;
}
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
@media (min-width: 768px)
.navbar-static-top {
  border-radius: 0;
}
.navbar-static-top {
  z-index: 1000;
  border-width: 0 0 1px;
}


Isso são informações de borda, cor, posição (o que fica atrás de que, "z-indez"), e mais algumas outras. Mas você está no caminho certo. Se tiver alguma dúvida específica, só perguntar.
GOSTEI 0
Gabriela Monte

Gabriela Monte

13/06/2015

Está ótimo Randrade, vou conhecendo aos poucos, utilizar o f12.
GOSTEI 0
POSTAR