Abrir links no próprio separador

Nuno Mateus · March 19, 2013 at 11:16 PM

https://www.youtube.com/embed/NAKFvQlDipo?feature=oembed

Pessoal eu estive a seguir este tutorial para fazer um menu, mas não sei como ele faz para abrir os links no separador.

tenho o código todo , só não sei como faz para abrir o link dentro do separador.

código html:

<!DOCTYPE html>

<html>

<head>

<title> Site Menu</title>


<link rel="stylesheet" type="text/css" href="styleMenu.css">


</head>


<body>

<div id="navbar">

<div id="holder">

<ul>

<li> <a href="home.html" id="onlink">home </a> </li>
<li> <a href="produtos.html">produtos</a> </li>
<li> <a href="serviços.html">serviços</a> </li>
<li> <a href="gallery.html">gallery </a> </li>
<li> <a href="contact.html">contact </a> </li>

</ul>

</div> <!--end holderbar-->
</div> <!--end navbar-->
</body>
</html>

----------------------------------------------------

codigo css:

#navbar
{
width:660px;
}

#navbar #holder
{
height:64px;
border-bottom:1px solid #000;
width:630px;
padding-left:25px;
}

#navbar #holder ul
{
list-style:none;
margin:0px;
padding:0px;
}

#navbar #holder ul li a
{
text-decoration:none;
float:left; /*faz com que os links se vão colocando um após outro até Haver espaço na linha*/
margin-right:5px;
font-family:"Arial Black", Gadjet, sans-serif;
color:#000;
border:1px solid #000;
border-bottom:none; /*anula a borda de baixo posta pelo border*/
padding:20px;
width:75px;
text-align:center;
display:block;
background:#69F;
border-top-left-radius:15px;
border-top-right-radius:15px;
/*border-radius:15px;*/
/*arredonda as partes de cima dos separadores*/
}

#navbar #holder ul li a:hover
{
background:#F90;
color:#FFF;
text-shadow:1px 1px 1px #000;
}

#holder ul li a#onlink
{
background:#FFF;
color:#000;
border-bottom:1px solid #FFF; /*#FFF é branco*/
}

#holder ul li a#onlink:hover
{
background:#FFF;
color:#69F;
text-shadow:1px 1px 1px #000;
}

Obrigado a todos, atenciosamente ,

Nuno Mateus

HappyHippyHippo · March 19, 2013 at 11:29 PM

o que queres dizer com separador ? consegues explicar mais concisamente aquilo que pretendes efectuar ?

Nuno Mateus · March 20, 2013 at 10:51 AM

O que quero é por ex: aquele separadores tipo site do sapo, onde estão noticias,actualidade,etc..

Assim que mudo de separador aparece uma imagem "link" com uma breve descriçao e ao clicar na imagem , abro a página da noticia.

A parte de abrir a página da noticia eu sei.Não sei é como faço para aparecer a imagem link ao mudar de separado.

EX:

| |__ | |_

| Img | img |

| _________| |__________

Muito obrigado Atenciosamente ,

Nuno Mateus

HappyHippyHippo · March 20, 2013 at 11:31 AM

desculpa, mas ainda náo percebi que pretendes ter

- um menu

- um sistema de tabs

- uma outra coisa qualquer

não consegues fornecer um site onde apresenta exactamente o que pretendes ?

Nuno Mateus · March 21, 2013 at 12:51 AM

O menu que pretendo é este, sem javascript. Eu tenho esse código aí em cima que me faz os menus, só não sei como fazer para abrir conteúdo , tipo uma imagem ou uma página que eu possa ter na pasta raiz do site, dentro do conteúdo dos separadores.

Atenciosamente,

Nuno mateus

http://img21.imageshack.us/img21/166/menupronto.gif

abolinhas · March 26, 2013 at 02:42 PM

Tens aqui uns exemplos de Tabs só com CSS3 (no javascript)

http://tympanus.net/codrops/2012/04/12/animated-content-tabs-with-css3/

http://blogs.sitepointstatic.com/examples/tech/css3-target/tabs.html#tab1

Sign In

Abrir links no próprio separador

Recommended Posts

Nuno Mateus

HappyHippyHippo

Nuno Mateus

HappyHippyHippo

Nuno Mateus

abolinhas

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information