Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Medivh

menu css

Recommended Posts

Medivh    4

Estou tentando criar um menu mas, ele chega até certa parte e não altera mais nada ficando somente até isso http://imgur.com/a/2MW5k, queria que me dissessem o que está errado.

 

Abaixo o código

notepad++

/* Cabeçalho */

header {
	height: 55px;
	background-color: #eae9e9;
	box-shadow: 2px 4px 3px #778899;
	position: fixed;
	top: 0;
    left: 0;
	width: 100%;
}

#logo {
	margin-left: 5px;
	float: left;
	padding-top: 8px;
}

.menu {
	margin: none;
	list-style: none;
	float: right;
	font-style: normal;
}

.menu li {
	position: relative;
	float: left;
	margin: 18px 10px 10px;
}

.menu li a {
	color: #00bfff;
	padding: 5px 10px;
	display: block;
}

.menu li a:hover {
	background: #fff;
	text-shadow: 0 0 5px #fff;
}

.menu li ul {
	position: absolute;
	top: 25px;
	left: 0;
	background-color: black;
	padding: 0;
	box-shadow: 3px 3px 6px #001d44;
	z-index: 10;
	display: none;
	border: solid 1px #3e3e3f;
}

.menu li ul li:hover {
	margin: 0;
}

.menu li:hover ul {
	display:block;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Frederico15    0

Te aconselho um menu em JQuery, você pode fazer toda parte do estilo em CSS, mas a parte da animação fica legal em JQuery.

adicionado 11 minutos depois

Mas se quiser você deveria tentar esconder o menu antes de colocar para aparecer, senão não vai mudar nada, ele está lá, e depois você vai mandar ele aparecer mesmo ele já estando.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Medivh    4
  • Autor do tópico
  • Agora como fazer o submenu ficar abaixo quando passar o mouse em cima, eu dei uma modificada mas ainda sim não consigo fazer isso.

     

    Essa parte esta me dando dor de cabeça, necessito de uma luz no fim do tunel ...

     

    HTML menu e sub. 

    <nav class="menu">
    				<ul>
    					<li><a href="index.html">HOME</a></li>
    					<li><a href="sobre.html">SOBRE</a></li>
    					<li class="menu"><a href="eventos.html">EVENTOS</a></li>
    						<ul class="sub-menu">
    							<li><a href="evento_festivais">FESTIVAIS</a></li>
    							<li><a href="evento_shows">SHOWS</a></li>
    							<li><a href="evento_workshops">WORKSHOPS</a></li>
    						</ul>
    					</li>
    					<li><a href="contato.html">CONTATO</a></li>
    				</ul>
    			</nav>

     

    CSS na parte do menu e sub

    .menu {
    	margin: none;
    	float: right;
    	font-style: normal;
    	display: block;
    	color: blue;
    }
    
    
    .menu li {
    	list-style-type:none;/* isso tira os marcadores da lisa */
    	position: relative;
    	float: left;
    	margin: 18px 10px 10px;
    }
    
    
    
    .sub-menu {
    	position: absolute;
    	display: none;
    	right: 0;
    }
    
    .menu li :hover .sub-menu {
        display:block ;
    }
    
    .menu li a:hover {
    	background: #fff;
    	text-shadow: 0 0 5px #fff;
    	display: none;
    }
    
    .menu:hover .sub-menu{
        display: block;
    }

     

    menu.png

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    DYS    4

    Tenta colocar:

    .menu {
    	margin: 0;
    	float: right;
    	font-style: normal;
    	display: block;
    	color: blue;
    	top:0px;
    	left:0px;
    	width:100%;
    }
    <style>
    *{
    	margin:0px;
    }
    .mae {
    	width:100%;
    	position:absolute;
    	top:0px;
    	left:0px;
    	min-width:450px;
    }
    .menu {
    	background-color:rgb(180,180,180);
    	margin: 0;
    	font-style: normal;
    	display: block;
    	color: blue;
    	top:0px;
    	right:0px;
    	width:100%;
    	min-height:60px;
    }
    .blocolink{
    	position:relative;
    	float:right;
    	width:400px;
    	min-width:300px;
    }
    .menu li{
    	display:inline;
    	text-decoration:none;
    	position:relative;
    }
    .btn{
    	text-decoration:none;
    	background-color:rgb(230,230,230);
    	border:5px;
    	margin-right:50px;
    	padding:10px;
    	margin-top:10px;
    	color:black;
    }
    .dropbtn{
    	cursor:pointer;
    }
    .dropdown{
    	position:relative;
    	display:inline-block;
    }
    .dropdown-content{
    	display:none;
    	position:absolute;
    	background-color:blue;
    	min-width:160px;
    	z-index:1;
    }
    .dropdown-content a{
    	border:solid;
    	border-top:0.2px;
    	color:white;
    	text-decoration:none;
    	padding:12px 16px;
    	display:block;
    }
    .dropdown-content a:hover{
    	background-color:black;
    }
    .dropdown:hover .dropdown-content{
    	display:block;
    }
    .dropdown:hover .dropbtn{
    	background-color:;
    }
    </style>
    <div class="mae">
    	<header>
    		<nav class="menu">
    			<ul class="blocolink">
    				<li><a class="btn" href="index.html">HOME</a></li>
    				<li><a class="btn" href="sobre.html">SOBRE</a></li>
    				<li class="links">
    					<div class="dropdown">
    						<button class="btn dropbtn">EVENTOS</button>
    						<div class="dropdown-content">
    							<a href="evento_festivais">FESTIVAIS</a>
    							<a href="evento_shows">SHOWS</a>
    							<a href="evento_workshops">WORKSHOPS</a>
    						</div>
    					</div>
    				</li>
    			</ul>
    		</nav>
    	</header>
    </div>

    Deixei ele minimamente responsivo e utilizei códigos da W3C para criar a dropdown, acho que a partir dai você já consegue montar o resto. Pode ter sujeira, porque fiz com pressa, preciso terminar meu projeto também, kkkkkk...

    Recomendo criar um arquivo CSS e começar a usar alguma IDE, ajudam bastante a organizar os arquivos. 

    Editado por DYS
    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    Medivh    4
  • Autor do tópico
  • @DYS Cara muito obrigado, estou começando agora do jeito que foi ensinado no curso não estava dando certo, pelo menos nessa parte do menu.

     

    Eu vou dar uma estudada nisso que tu me passou, valeu mesmo...

     

    Em 2017-6-24 às 16:56, DYS disse:

    Recomendo criar um arquivo CSS e começar a usar alguma IDE, ajudam bastante a organizar os arquivos. 

    Qual você recomenda usar?

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    DYS    4

    @Medivh Quando vou usar eu uso NetBeans e RJ TextED. Uma dica que dou é utilizar temas mais escuros, cinza/preto, são muito bons para descansar um pouco os olhos.

     

    Editado por DYS

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário






    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×