Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

romulorasec

Colocar seta na parte de baixo do menu com lista e jquery

Por , em Desenvolvimento frontend

Recommended Posts

romulorasec    0

romulorasec
Postado

Gostaria de colocar a seta segue link da imagem.

mi0r.jpg

 

Link da imagem em PNG sem funfo para ser usada.
http://imageshack.com/a/img829/4639/pqil.png


Grato pela ajuda dos amigos.


Abaixo meu HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Abas Ultilizando Jquery</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="abas.js"></script>
</head>

<body>

<div id="geral">

<ul class="menu">
<li><a href="#aba01">Mais vistos</a></li>
<li><a href="#aba02">Mais comentados</a></li>
</ul><!--FECHA UL MENU-->

<div id="box">
<div id="aba01" class="conteudo">Aqui vai os posts mais visto!</div>
<div id="aba02" class="conteudo">Aqui vai os posts mais comentados</div>
</div><!--Fecha Div BOX-->

</div><!--Fecha Div GERAL-->

</body>
</html>

 



Abaixo CSS

*{ margin:0; padding:0;}

#geral{ width:300px; margin:0 auto;}

ul.menu{width:100%; margin:0; padding:0; float:left; list-style:none; height:32px; }

ul.menu li{ width:150px; float:left; margin:0; padding:0; height:31px; line-height:31px; background:#e0e0e0; overflow:hidden; position:relative;}

ul.menu li a{text-decoration:none; color:#000; border:1px solid #000; display:block; font-size:12px; text-align:center; outline:none;}

ul.menu li a:hover{ background:#66ccff;}

ul.menu li.active, ul.menu li.active a:hover{background:#c5df61; border-bottom:1px solid #FFF;}

#box{ text-align:left; border:1px solid #999; border-top:5px; clear:both; float:left; width:100%; background:#FFF;}

.conteudo{ padding:20px; font-size:12px;}
.conteudo h2{ font-weight:normal;}

 



Abaixo JS

// JavaScript Document
$(document).ready(function() {

//Quando carregar a pagina
$(".conteudo").hide(); //esta primeira linha servir para esconder as divs do contedo
$("ul.menu li:first").addClass("active").show(); //Ativar primeira aba
$(".conteudo:first").show(); //abre a primeira pagina(aba) efeito (slow)ou (fast)

//On Click Event
$("ul.menu li").click(function() {// quando clicar no link do menu ir executar a seguinte funo:
$("ul.menu li").removeClass("active"); //remove a class no link clicado para que no fica marcado
$(this).addClass("active"); //adiciona a classe no link clicado para que o usuario saiba em qual link ele esta

$(".conteudo").hide(); //esconder as divs do contedo
var activeaba = $(this).find("a").attr("href"); //Encontrar o valor do atributo rel para identificar a aba que esta ativa + contedo
$(activeaba).fadeIn('slow'); //efeito de fade in com o contedo ativo
return false;// o returno falso evita que ao clicar no link a pgina role para o topo.
});

});

 


Compartilhar este post

Link para o post
Compartilhar em outros sites

romulorasec    0

romulorasec
Postado

É isso sim rnxn, agora é só ver como fica isso usando ul, vou tentar aqui muito obrigado ajudou demais, qualquer coisa peço um Help aí pra vc novamente.

 

 

Pessoal to tendo dificuldades podem me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

romulorasec    0

romulorasec
Postado

Porque estou sando UL, nao consegui adaptar, e nao achei uma possibilidade de o hover funcionar na seta tb assim que passar o mouse e tambem quando ativo. Por favor me deem uma luz ai. Grato

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas Luís Huber    14

Nícolas Luís Huber
Postado

Rômulo, fiz um exemplo aqui para te ajudar. Código explica-se por si mesmo, mas vamos alguns detalhes:

1) Na parte do HTML temos uma estrutura básica, apenas uma div com a classe .menu, dentro há uma listagem de itens que são os links, um dos links recebeu a class .active que serve para estilizar o item ativo. Simples!

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">What We Do</a></li>
    <li><a href="#">What We Are</a></li>
    <li><a class="active" href="#">FAQ</a></li>
    <li><a href="#">Contact</a></li>
</ul>

2) A parte do CSS acabei fazendo um estilo próprio, mas o que realmente interessa é:

.menu .active, .menu a:hover {
    background: #333;
    position: relative;
}
.menu .active:before, .menu a:hover:before  {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #333;
}
  • Na primeira parte estilizamos o .active, quando o link está ativo e o evento :hover quando é passado o mouse sobre os links. É importante definirmos o position como relative, porque servirá de referência para nossa próxima declaração.
  • Na última sessão estilizamos utilizando o pseudo-elemento :before que basicamente diz ao browser que quero inserir algo no início do elemento .menu a.
  • Em seguida começamos o estilo, na verdade criamos a seta com um "truque" de borda do CSS, esse elemento só possui bordas, por isso adicionamos o width e o height como zero.
  • É importante definir a propriedade content, caso contrário não irá funcionar.
  • Colocamos o position como absolute, sua posição absoluta é em referência ao seu elemento pai, o .menu a ou .menu .active. Então colocamos sua posição bottom -10px, ou seja, vai ficar posicionado 10px depois do fim do .menu a. Também posicionamos com left 50%, ou seja, irá ficar 50% deslocado da esquerda, porém o tamanho da seta é de 5px, então seu deslocamento total foi 50% + 5px, para consertar isso utilizamos uma margem negativa a esquerda: margin-left: -5px;

Fontes:

http://www.w3schools.com/css/css_pseudo_elements.asp

http://css-tricks.com/snippets/css/css-triangle/

Compartilhar este post

Link para o post
Compartilhar em outros sites

romulorasec    0

romulorasec
Postado

Pessoal acho que cheguei onde queria, graças a luxuosa ajuda de todos muito um obrigado especial ai ao Nicolas.

Segue o código completo, afinal alguém pode precisar.

 

HTML

 

            <div id="right_siderbar_abas">
                        <ul class="right_siderbar_abas">
                            <li><a href="#aba01">Mais vistos</a></li>
                            <li><a href="#aba02">Mais comentados</a></li>
                        </ul><!--FECHA UL MENU-->
            </div><!--Fechamento Right_Siderbar_Abas-->
             
                        <div id="box_abas">
                            <div id="aba01" class="box_conteudo">
                                <ul>
                                    <li>
                                        <a href="#">
                                        <h1>1</h1>
                                        <img src="midias/lidas1.jpg" alt="" border="0" width="80" height="45" />
                                        Plataforma de petróleo não corre mais risco de afundar em Campos, no RJ
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h1>2</h1>
                                        <img src="midias/lidas2.jpg" alt="" border="0" width="80" height="45" />
                                		Plataforma de petróleo não corre mais risco de afundar em Campos, no RJ
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h1>3</h1>
                                        <img src="midias/lidas3.jpg" alt="" border="0" width="80" height="45" />
                                		Plataforma de petróleo não corre mais risco de afundar em Campos, no RJ
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h1>4</h1>
                                        <img src="midias/lidas4.jpg" alt="" border="0" width="80" height="45" />
                                		Plataforma de petróleo não corre mais risco de afundar em Campos, no RJ
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h1>5</h1>
                                        <img src="midias/lidas5.jpg" alt="" border="0" width="80" height="45" />
                                		Plataforma de petróleo não corre mais risco de afundar em Campos, no RJ
                                        </a>
                                    </li>
                                </ul><!--FECHA UL MENU-->
                            </div><!--FECHA BOX ABAS1-->
                            
                            <div id="aba02" class="box_conteudo">
                                <ul>
                                    <li>
                                        <a href="#">
                                        <h1>1</h1>
                                        <img src="midias/lidas4.jpg" alt="" border="0" width="80" height="45" />
                                        Plataforma de petróleo não corre mais risco de afundar em Campos, no RJ
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h1>2</h1>
                                        <img src="midias/lidas5.jpg" alt="" border="0" width="80" height="45" />
                                		Plataforma de petróleo não corre mais risco de afundar em Campos, no RJ
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h1>3</h1>
                                        <img src="midias/lidas2.jpg" alt="" border="0" width="80" height="45" />
                                		Plataforma de petróleo não corre mais risco de afundar em Campos, no RJ
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h1>4</h1>
                                        <img src="midias/lidas1.jpg" alt="" border="0" width="80" height="45" />
                                		Plataforma de petróleo não corre mais risco de afundar em Campos, no RJ
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h1>5</h1>
                                        <img src="midias/lidas3.jpg" alt="" border="0" width="80" height="45" />
                                		Plataforma de petróleo não corre mais risco de afundar em Campos, no RJ
                                        </a>
                                    </li>
                                </ul><!--FECHA UL MENU-->
                            </div><!--FECHA BOX ABAS2-->
                        </div><!--FECHA BOX ABAS-->

CSS

 

#right_siderbar_abas{width:300px; margin:0 auto;}
#right_siderbar_abas ul {width:100%; margin: 0; padding: 0; background-color:#F3F3F3; list-style:none;}
#right_siderbar_abas ul li {position:relative; width:150px; height:35px; line-height:35px; float:left; background:#E7F6FB;font:14px "Arial", Helvetica, sans-serif; color:#0C6;}
#right_siderbar_abas ul li a{position:relative; width:150px; height:35px; line-height:35px; float:left; text-decoration:none; text-align:center; color: #00698C;}
#right_siderbar_abas ul li a:hover{position: relative; background:#C9E9F5; text-decoration:none; color:#00698C;}
#right_siderbar_abas ul li.active a{position:relative; color:#FFF; font-weight:bold; background:#00698C;}
#right_siderbar_abas ul li.active a:hover{background: #00698C; position: relative; color:#FFF;}
#right_siderbar_abas ul li.active:before{width: 0; height: 0; content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -15px; border-top: 15px solid #c5df61; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top-color: #00698C;}
#right_siderbar_abas ul a:hover:before{width: 0; height: 0; content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -15px; border-top: 15px solid #; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top-color: #E0EEA9;}

/*Box Abas Mais Lidos e Comentados*/

#box_abas{width:300px; margin:0 auto; border-top:1px; clear:both;}
#box_abas ul{width:100%; float:left; margin:0; padding:0; list-style:none;}
#box_abas li{position:relative; width:100%; height:60px; float:left; font:12px "Arial", Helvetica, sans-serif; color:#0C6; margin-bottom:20px;}
#box_abas ul li a{position:relative; width:295px; height:60px; line-height:15px; float:left; text-decoration:none; color: #00698C; padding:15px 0 0 5px;}
#box_abas ul li a:hover{background:#E7F6FB; color:#00698C; text-decoration:underline;}
#box_abas ul li img{float:left; margin-right:5px; padding:0 2px 0 5px;}
#box_abas ul li h1{font:45px "Arial", Helvetica, sans-serif; color:#00698C; font-weight:bold; float:left;}
.box_conteudo{ height:auto; padding:22px 0;}

 

JS

 

// JavaScript Document
$(document).ready(function() {

	//Quando carregar a pagina
	$(".box_conteudo").hide(); //esta primeira linha servir para esconder as divs do contedo
	$("ul.right_siderbar_abas li:first").addClass("active").show(); //Ativar primeira aba
	$(".box_conteudo:first").show(); //abre a primeira pagina(aba) efeito (slow)ou (fast)

	//On Click Event
	$("ul.right_siderbar_abas li").click(function() {// quando clicar no link do menu ir executar a seguinte funo:
		$("ul.right_siderbar_abas li").removeClass("active"); //remove a class no link clicado para que no fica marcado
		$(this).addClass("active"); //adiciona a classe no link clicado para que o usuario saiba em qual link ele esta

		$(".box_conteudo").hide(); //esconder as divs do contedo
		var activeaba = $(this).find("a").attr("href"); //Encontrar o valor do atributo rel para identificar a aba que esta ativa + contedo
		$(activeaba).fadeIn('slow'); //efeito de fade in com o contedo ativo
		return false;// o returno falso evita que ao clicar no link a pgina role para o topo.
	});

});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito