GARANTIR DESCONTO

Fórum Menu que acompanha site. #522782

13/06/2015

0

Front-end

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

Responder

Posts

13/06/2015

Giluan Souza

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

Gostei + 0

13/06/2015

Marcio Araujo

Não deu certo....

http://www.w3.org/Style/Examples/007/menus
Responder

Gostei + 0

13/06/2015

Giluan Souza

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

Gostei + 0

14/06/2015

Marcio Araujo 


<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;
}
Responder

Gostei + 0

15/06/2015

Randrade

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

Gostei + 0

15/06/2015

Marcio Araujo

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

Gostei + 0

15/06/2015

Randrade

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

Gostei + 0

15/06/2015

Marcio Araujo

Vou atrás Randrade, obrigado Randrade.
Responder

Gostei + 0

15/06/2015

Marcio Araujo

Vou atrás Randrade, obrigado Randrade.
Responder

Gostei + 0

16/06/2015

Gabriela Monte

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

Gostei + 0

16/06/2015

Randrade

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

Gostei + 0

16/06/2015

Gabriela Monte

É o Navbar?
Responder

Gostei + 0

17/06/2015

Randrade

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

Gostei + 0

17/06/2015

Gabriela Monte

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;
}
Responder

Gostei + 0

17/06/2015

Randrade

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

Gostei + 0

Mais tópicos

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar