"   Pretty menu simples maravilhosa"

" Isto funciona muito menu jQuery e está a criar Codrops é adaptado a um tamanho menor do que o original para ser mostrado neste post, mas as explicações resultará em nós um menu de 800px alta de largura e 300px que é o tamanho das imagens.

demo original Ver do autor Codrops"

" Os estilos vão adicionar o pessoal colocando-nos numa só edição de HTML depois do rótulo

]]></ B: skin>

type='text/css'> <style
. Rotator (
background-color : # 111;
width: 800px ;
height: 300px ;
margin: auto 0px ;
position: relative;
font-family : ' Myriad Pro ' , Arial , Helvetica , sans-serif ;
color: # fff ;
text-transform : uppercase ;
letter-spacing :- 1px;
border: 3px solid # f0f0f0 ;
overflow: hidden;
-Moz- box-shadow : 0px 0px 10px # 222 ;
-Webkit- box-shadow : 0px 0px 10px # 222 ;
box-shadow : 0px 0px 10px # 222 ;
)
. ul Rotator (
list-style : none;
position: absolute;
direita: 0px ;
top: 0px ;
margin-top: 6px ;
z-index: 999999;
)
. li Rotator ul (
display: block ;
float: left ;
clear: both ;
width: 260px ;
)
. li Rotator ul (
width: 230px ;
float: right ;
clear: both ;
padding-left : 10px ;
text-decoration : none;
display: block ;
height: 52px ;
line-height : 52px ;
background-color : # 222;
margin: 0px 1px 1px - 20px ;
opacidade: 0,7;
color: # f0f0f0 ;
font-size: 20px ;
border: 2px solid # 000;
borda direita : none;
tópicos: none;
text-shadow: - 1px 1px 1px # 000;
-Moz- border-radius : 10px 0px 0px 20px ;
-Webkit- border-top -left- radius: 10px;
-Webkit- border-bottom -left- radius: 20px ;
border-top -left- radius: 10px;
border-bottom -left- radius: 20px ;
)
. Rotator ul li a: hover (
text-shadow: 0px 0px 2px # fff;
)
. Rotator. Rubrica (
position: absolute;
top: 0px ;
left: 0px ;
width: 500px ;
)
. Rotator. rubrica h1 (
line-height : 52px ;
text-shadow: - 1px 1px 1px # 555;
font-weight : normal ;
font-size: 46px ;
padding: 20px ;
)
. Rotator. Description (
width: 500px ;
height: 80px ;
position: absolute;
bottom : 0px;
left: 0px ;
padding: 20px ;
background-color : # 222;
-Moz- border-radius : 10px 0px 0px 0px ;
-Webkit- border-top -direito- radius: 10px;
border-top -direito- radius: 10px;
opacidade: 0,7;
border-top : 2px solid # 000;
border-right : 2px solid # 000;
)
. Rotator. p Description (
text-shadow: - 1px 1px 1px # 000;
text-transform : none;
letter-spacing : normal ;
line-height : 26px ;
)
( a.more
cor: laranja ;
text-decoration : none;
text-transform : uppercase ;
font-size: 10px;
)
a.more : hover (
color: # fff ;
)
</ Style>

"    No mesmo local e em seguida, adicione o    seguinte conteúdo:                                                  arquivo                                                                        

Se nós já estamos utilizando o jQuery para algum outro propósito omitir o próximo passo , primeiro usando o suplemento também:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'

 type='text/javascript'/>

Cada formulário contém um bloco e é a parte que temos de mudar , que será o título da aba do menu , o título de conteúdo , a descrição, o URL da imagem eo link com o texto "   Mais ..."    vai como esta:

<li> <a href="rot4">Título guia -1</ A> style="display:none;"> <div
class="info_image"> <divURL da Imagem -1</ Div>
class="info_heading"> <div
Texto de conteúdo -1</ Div>
class="info_description"> <div
Descripción1 texto aqui
<A href = "#"Class = "mais" >Leia mais ...</ A> </ div>
</ Div>
</ Li>

E o código completo do menu para adicionar um HTML Gadget seria:

class="rotator"> <div
id="rotmenu"> <ul
<li> <a href="rot1">título Tab -1</ A>
style="display:none;"> <div
class="info_image"> <divURL da Imagem -1</ Div>
class="info_heading"> <div
Texto de conteúdo -1</ Div>
class="info_description"> <div
Essa descrição de texto 1
<A href = "#"Class = "mais" >Leia mais ...</ A>
</ Div>
</ Div>
</ Li>
<li> <a href="rot2">Título guia -2</ A> style="display:none;"> <div
class="info_image"> <divURL da Imagem -2</ Div>
class="info_heading"> <div
Texto de conteúdo -2</ Div>
class="info_description"> <div
Esta descrição do texto 2
<A href = "#"Class = "mais" >Leia mais ...</ A> </ div>
</ Div>
</ Li>
<li> <a href="rot3">Título guia -3</ A> style="display:none;"> <div
class="info_image"> <divURL da Imagem -3</ Div>
class="info_heading"> <div
Texto de conteúdo -3</ Div>
class="info_description"> <div
Esta descrição do texto 3
<A href = "#"Class = "mais" ...</ > Mais a> < / div>
</ Div>
</ Li>
<li> <a href="rot4">Título guia -4</ A> style="display:none;"> <div
class="info_image"> <divimage -url -4</ Div>
class="info_heading"> <div
Texto de conteúdo -4</ Div>
class="info_description"> <div
4 Texto de descrição aqui
<A href = "#"Class = "mais" >Leia mais ...</ A> </ div>
</ Div>
</ Li>
<li> <a href="rot5">Título -5 guia -</ A> style="display:none;"> <div
class="info_image"> <divimage -url -5</ Div>
class="info_heading"> <div
Título de conteúdo -5</ Div>
class="info_description"> <div
Esta descrição texto 5
<A href = "#"Class = "mais" >Leia mais ...</ A> </ div>
</ Div>
</ Li>
</ Ul>
id="rot1"> <div
<Img src = "URL da Imagem -1"Width = "800 "height = "300 "class =" bg "alt =""/>
class="heading"> <div
<h1>
</ H1>
</ Div>
class="description"> <div
<p>
</ P>
</ Div>
</ Div>
</ Div>

❋ Título guia -1 , 2, 3 , 4, 5 , escreva o título do conteúdo.

❋ url- imagem -1 , 2, 3 , 4, 5 cole a URL da imagem como a cópia sem adicionar a tag de imagem.

❋ Texto de conteúdo -1 , 2, 3 , 4, 5 , escreva a descrição a ser exibida após o título.

❋ Leia mais ... Podemos substituir qualquer outro texto.

❋ Há uma parte que diz:

<A href = "#"Class = "mais" >Leia mais ...</ A>

    " a parte que podemos usá-lo como um link , se por exemplo queremos vincular uma entrada ou uma página estática que queremos copiar a url e link cole substituir a almofada . Desta forma a marca em "    Leia mais ... tomamos o link do site."

fonte e créditos do presente post de:           gemablog