▼Pesquisar aqui mesmo

Seja nosso parceiro!

Parcerias:
banners
120x60



nosso banner:
menu 3x



clique
selecione
copie
cole
o texto da cx e
divulgue
Clique aqui e Leia Mais +++►

|CONTATO|

 fale conosco

Nome
E-mail * 
Mensagem * 

|CONTATO|


  Ou através de: Através de :

... Intensedebate ... Mensagens / Recados / Comentarios...

















Clique aqui e Leia Mais +++►

Saiba como fazer: "Slide com atualizações automáticas 2"

fonte e créditos:



Saiba como fazer: "Slide com atualizações automáticas 2"








"  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI "






"Copie o código e cole no 


HTML/Javascript, cole o 


endereço de seu blog no local 


indicado e salve."









<b:if cond='data:blog.pagetype == &quot;item&quot;'>
<div class="widget-content">
<style>
#slideshow {
width: 980px; /*aqui o comprimento do slide*/
margin: 5px 5px 5px 0;
padding:0;
background:#292929;
height:380px;
overflow:hidden;
border: 1px solid #000;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
box-shadow: 0px 0px 1em #3A3B4C;
-webkit-box-shadow: 0px 0px 1em #3A3B4C;
-moz-box-shadow: 0px 0px 1em #3A3B4C;
padding: 1px 2px 1px 2px;
}
#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}
#slideshow .slides {/*maior*/
width:640px;
overflow: hidden;
float:left;
color: #fff;
}
#slideshow .slides ul {/*maior*/
float:left;
overflow: hidden;
width:640px;
height:400px;
}
#slideshow .slides li {
display:none;
left:-99999em;
width:565px;
height:400px;
display:block;
overflow: hidden;
background:#fff;
position:relative;
z-index:1;
}
.js #slideshow .slides li {/*maior*/
margin: 0;
padding: 0;
list-style-type: none;
width:640px;/*area maior*/
height:400px;
display:block;
overflow: hidden;
background:#fff;
position:relative;
z-index:1;
}
.js #slideshow .slides li .entry {/*area maior*/
width:630px;
color: #fff;
height: 100px;/*area inscrição tarja grande*/
padding: 85px 5px 5px 5px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
#slideshow .slides li .entry p {
margin: 0;
}
#slideshow .slides li .entry h2 ,
#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active  {
font-size: 20px;
line-height: 1.1em;
margin:0;
color: #808080;

margin: 0;
letter-spacing:0;
border:none !important;
}
#slideshow  ul.slides-nav {/*Menor*/
height:400px;
width:335px;/*area menor*/
margin:0;
padding: 0;
float:right;
overflow:hidden;
}
#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
}
#slideshow .slides-nav li a {/*area slide menor*/
width:330px;/*area tarja menor*/
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:7px;
text-align: left;
list-style-type:none;
display:block;
height:25px;
color: #ccc;
font-size:14px;
overflow:hidden;
background: transparent;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:400px;
left:0;
opacity:1;
position:absolute;
top:0;
width:540px;
z-index:6;
}
.js #slideshow .slides-nav li.on a {/*area tarja menor*/
background: url(http://1.bp.blogspot.com/-XOUEo5foa9I/TWWKpYR0qGI/AAAAAAAAEUs/QelSPRmrb60/s1600/back.png) ;
color: #000;
}
.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#fff;
}
#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: -6px 10px 0 18px;
padding:2px;
border: 1px solid #aaa;
width:70px;
height:35px;
}
.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#fff !important;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/_BaCxSD9NFn8/TFImJ3xTRpI/AAAAAAAABpQ/CM1uyut9_R0/s320/templatesww.png";
showRandomImg = true;
aBold = true;
summaryPost = 00; //
summaryTitle = 25; //
numposts = 10; //
home_page = "ENDEREÇO DE SEU BLOG";
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul class="slides-nav">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
posttitle = (aBold) ? ""+posttitle+"" : posttitle;
var trtd = ' <li id="post-'+i+'" class="clearfix"> <a href="#main-post-'+i+'" class=""><img height="150px" width="150px" class="post_thumbnail thumbnail thumbnail post_thumbnail" alt="" src="'+img[i]+'"/>'+posttitle+'</a> </li> ';
document.write(trtd);
j++;
}
document.write('</ul>');
}
function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul class="clearfix" style="position: relative;">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
posttitle = (aBold) ? ""+posttitle+"" : posttitle;
var trtd = '<li style="background: transparent url('+img[i]+')" id="main-post-'+i+'"><div class="entry"><h2 class="post-title"><a href="'+posturl+'">'+posttitle+'</a></h2> <p>'+removeHtmlTag(postcontent,summaryPost)+'</p></div></li> ';
document.write(trtd);
j++;
}
document.write('</ul>');
}
</script>
<script src="http://sites.google.com/site/menuhorizontal2/slidefeed/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/motoslide/cycle/jquery.cycle.js" type="text/javascript">
</script>
<script type="text/javascript">
$slideshow = {
context: false,
tabs: false,
timeout: 7000,
slideSpeed: 1000,
tabSpeed: 1000,
fx: 'toss',
init: function() {
this.context = $('#slideshow');
this.tabs = $('ul.slides-nav li', this.context);
this.prepareSlideshow();
},
prepareSlideshow: function() {
$('div.slides > ul', $slideshow.context).cycle({
fx: $slideshow.fx,
timeout: $slideshow.timeout,
speed: $slideshow.slideSpeed,
fastOnEvent: $slideshow.tabSpeed,
pager: $('ul.slides-nav', $slideshow.context),
pagerAnchorBuilder: $slideshow.prepareTabs,
before: $slideshow.activateTab,
pauseOnPagerHover: true,
pause: true
});
},
prepareTabs: function(i, slide) {
return $slideshow.tabs.eq(i);
},
activateTab: function(currentSlide, nextSlide) {
var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
if(activeTab.length) {
$slideshow.tabs.removeClass('on');
activeTab.parent().addClass('on');
}
}
};
$(function() {
$('body').addClass('js');
$slideshow.init();
});
</script>


<div id="slideshow" class="clearfix">
<div class="slides">
<script language="JavaScript">
document.write("<script src=\""+home_page+"feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class="slides-nav">
<script language="JavaScript">
document.write("<script src=\""+home_page+"feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>

</div>
</div>
</div>
</b:if>
Clique aqui e Leia Mais +++►

Saiba como é feito:..."» Menu em abas para widget no Blogger"


Outra forma de instalar o menu em abas em seu Blogger.


 DEMO


Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI


Vá até o HTML de seu blog e troque:
]]></b:skin>

pelo código abaixo(ajuste a largura indicado na cor vermelha)


/* Tabs
----------------------------------------------- */
#tabs {
    width: 370px !important;
    height: auto !important;
        margin: 2px 0px 6px 8px;
    padding: 5px 9px 5px -2px;
    border: 1px solid #ddd;
    float: left;
    display: block;
    background: #eee;
}
#tabs h2 {
    display: none;
}
.inside {
    width: 348px !important;
    padding: 5px 5px 10px 5px!important;
    border: 1px solid #ddd !important;
    margin: 5px 4px 10px !important;
    background: #FFF;
}
ul.wooTabs {
    width: 100%;
    padding: 0 0 20px 6px;
}
ul.wooTabs li {
    float: left;
    display: inline;
    font-size: 11px;
    line-height: 14px;
    background: #fff;
    color: #000;
    border: 1px solid #ddd;
    font-weight: bold;
    margin: 0 2px 0 0px !important;
    cursor: pointer;
}
ul.wooTabs li a {
    line-height: 31px;
    color: #000 !important;
    display: block;
    float: left;
    padding: 0 6px;
}
ul.wooTabs li a.selected, ul.wooTabs li a:hover {
    text-decoration: none;
    color: #fff !important;
    background: #C00;
}
#tagcloud {
    padding: 10px;
}
#sub img {
    float: right;
    margin: 0 0 8px 8px;
}
.inside li {
    background: ;
    border-bottom: 1px solid #EEE;
    padding: 8px 0 0 2px;
    margin: 0 0 0 -30px;
        list-style-type: none;
}
.inside li img.avatar, .inside li img.thumbnail {
    border: 1px solid #ddd;
    padding: 3px;
    float: left;
    margin: 0 8px 0 0;
    background: #fff;
}


]]></b:skin>

<!-- tabs -->          
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){

        // UL = .wooTabs
        // Tab contents = .inside
      
       var tag_cloud_class = '#tagcloud';
      
              //Fix for tag clouds - unexpected height before .hide()
            var tag_cloud_height = jQuery('#tagcloud').height();

       jQuery('.inside ul li:last-child').css('border-bottom','0px') // remove last border-bottom from list in tab conten
       jQuery('.wooTabs').each(function(){
           jQuery(this).children('li').children('a:first').addClass('selected'); // Add .selected class to first tab on load
       });
       jQuery('.inside > *').hide();
       jQuery('.inside > *:first-child').show();
       jQuery('.wooTabs li a').click(function(evt){ // Init Click funtion on Tabs
        var clicked_tab_ref = jQuery(this).attr('href'); // Strore Href value    jQuery(this).parent().parent().children('li').children('a').removeClass('selected'); //Remove selected from all tabs
            jQuery(this).addClass('selected');
            jQuery(this).parent().parent().parent().children('.inside').children('*').hide();
           
            /*
            if(clicked_tab_ref === tag_cloud_class) // Initiate tab fix (+20 for padding fix)
            {
                clicked_tab_ref_height = tag_cloud_height + 20;
            }
            else // Other height calculations
            {
                clicked_tab_ref_height = jQuery('.inside ' + clicked_tab_ref).height();
            }
            */
             //jQuery('.inside').stop().animate({
            //    height: clicked_tab_ref_height
            // },400,"linear",function(){
                    //Callback after new tab content's height animation
                    jQuery('.inside ' + clicked_tab_ref).fadeIn(500);
            // })
            
             evt.preventDefault();
})
    })
//]]>
</script>

 


Agora acima de:


 <div id='sidebar-wrapper'>

Cole o código abaixo. (Note que para as abas funcionarem os elementos precisam corresponder a grafia no endereço, no id e no class. Fiz esse esqueminha de cores para vc entender)


<div id='tabs'>
<ul class='wooTabs tabs'>
<li><a href='#pop'>Popular </a></li>
<li><a href='#perfil'>Perfil </a></li>
<li><a href='#feed'>Feed </a></li>
<li><a href='#marcadores'>Marcadores </a></li>
<li><a href='#seguidores'>Seguir </a></li>
</ul>  
      
<div class='fix'/>
<div class='inside'>

<div id='pop'>
<b:section class='pop' id='pop' maxwidgets='1'>
<b:widget id='PopularPosts2' locked='true' title='Postagens populares' type='PopularPosts'/>
</b:section></div>

<div id='perfil'>
<b:section class='perfil' id='perfil' maxwidgets='1'>
<b:widget id='Profile1' locked='true' title='Quem sou eu' type='Profile'/>
</b:section></div>

<div id='feed'> 
<b:section class='feed' id='feed' maxwidgets='1'>
<b:widget id='Subscribe1' locked='true' title='Inscrever-se' type='Subscribe'/>
</b:section></div>

<div id='marcadores'>
<b:section class='marcadores' id='marcadores' maxwidgets='1'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>
       
<div id='seguidores'>
<b:section class='seguidores' id='seguidores' maxwidgets='1'>
<b:widget id='Followers1' locked='true' title='Seguir' type='Followers'/>
</b:section>
</div>

</div></div>
<div class='fix' style='height:15px !important;'/>
<!-- TABS END -->



você está em:
http://lllmenu.blogspot.com
Clique aqui e Leia Mais +++►

Aprenda como se faz:..."Tooltip ncom efeito JQuery"

 » Este modelo de Menu, há tempos, que procuro, e agora a querida Elke, de
 http://templateseacessorios.blogspot.com/2010/12/tooltip-ncom-efeito-jquery.html

ensina no post a seguir de autoria dela...(ELKE DE BARROS)
 :::

"    Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI "
 :::

Tooltip ncom efeito JQuery

"  Coloque os links de seu blog com efeito tootip, é bem simples. "




Vá até o HTML de seu blog e antes de:
]]></b:skin>

Cole código abaixo:


.tip {
    color: #fff;
    background:#716D90;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}


..."  depois de"


]]></b:skin>

Cole o próximo código.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});

//]]>
</script>



Pronto, agora sempre que quiser  o efeito tooltip em algum link, vc dederá colocar esse próximo código:



<a class='tip_trigger' href='AQUI O ENDEREÇO DO LINK'>LINK AQUI<span class='tip'>INSCRIÇÃO DO QUE APARECERÁ NO TOOLTIP</span></a>









http://lllmenu.blogspot.com
Clique aqui e Leia Mais +++►

" 30 + Pure CSS Horizontal Tutoriais Menus"

"   30 + Pure CSS Horizontal Tutoriais Menus"






"   O menu de navegação de um site é muito importante "

"   Dá mais uma atração blog."

..."  seu site"  ...  "   muito útil para navegar através do seu site facilmente sem confusing."   

..."  os web master devem dar atenção especial para o menu de navegação superior de seus sites."

..."   abaixo alguns dos melhores coleção menu horizontal com CSS tutoriais configuração completa para o seu uso."


..."   pode escolher qualquer menu da lista abaixo e ir diretamente para as ligações do artigo"   ..."  e  instructions."

..."   instalação destes menus horizontais funcionando perfeitamente só utilizando imagens de CSS e, por vezes com CSS. (JavaScript não é usado por qualquer menu dadas aqui) Então você não quer se preocupar com os navegadores sobre o JavaScript desativado."

"  Se houver qualquer menu CSS você gosta da lista abaixo, mas você não pode adicioná-lo ao seu site ou blog mesmo, você pode contacte-me, Eu posso fazer isso por você."


 \/
fonte e créditos:
http://www.bloggertipandtrick.net/2010/11/30-pure-css-horizontal-menus-tutorials.html                                

Advanced CSS Menu



Demonstração: http://www.webdesignerwall.com/demo/advanced-css-menu/
Artigo: http://www.webdesignerwall.com/tutorials/advanced-css-menu/
Download: http://www.webdesignerwall.com/file/advanced-css-menu.zip


Bulletproof CSS Sliding Doors



Demonstração: http://azadcreative.com/files/Bulletproof.zip
Artigo: http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Download: http://azadcreative.com/files/BulletproofSlidingDoors.psd.zip


Criar um menu a mancha usando CSS3



Demonstração: http://insicdesigns.com/demo/css3/exp2/index.html
Artigo: http://blog.insicdesigns.com/2010/02/create-a-slick-menu-using-css3/
Download: Não


Como Fazer um Menu CSS Sprite Powered



Demonstração: http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.html
Artigo: http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Download: http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.zip


CSS Express menus drop-down



Demonstração: http://www.projectseven.com/tutorials/navigation/auto_hide/workpage.htm
Artigo: http://www.projectseven.com/tutorials/navigation/auto_hide/
Download: http://www.projectseven.com/tutorials/navigation/auto_hide/p7exp.zip


CSS3 somente horizontal menu drop guia de linha



Demonstração: http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/demo/index.html
Artigo: http://www.skyrocketlabs.com/articles/css3-only-horizontal-dropline-tab-menu.php
Download: http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/css3-only-horizontal-dropline-tab-menu.zip


Mais agradável de navegação com CSS Transitions




Demonstração: http://www.gethifi.com/blog/nicer-navigation-with-css-transitions
Artigo: http://www.gethifi.com/blog/nicer-navigation-with-css-transitions
Download: Não


Pure CSS Menu Horizontal



Demonstração: http://devinrolsen.com/wp-content/themes/typebased/demos/css/css-horizontal-menu/WORKS.php
Artigo: http://www.devinrolsen.com/pure-css-horizontal-menu/
Download: Não


CSS Menu DropDown



Demonstração: http://divitodesign.com/dd-articles/horizontal-css-menu/index.html
Artigo: http://divitodesign.com/css/how-to-dropdown-css-menu/
Download: http://www.divitodesign.com/dd-articles/horizontal-css-menu/horizontal-css-menu.rar


Pure CSS Menu Com Sub Infinite Menus Tutorial



Demonstração: http://www.devinrolsen.com/wp-content/themes/typebased/demos/css/infinite-sub-menu/
Artigo: http://www.devinrolsen.com/pure-css-menu-with-infinite-sub-menus-tutorial/
Download: Não


Menu Dropdown CSS3



Demonstração: http://www.webdesignerwall.com/demo/css3-dropdown-menu/
Artigo: http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
Download: Não


Elegante Drop Menu CSS com apenas



Demonstração: http://aext.net/example/elegant-menu-with-css-only/
Artigo: http://aext.net/2009/09/elegant-drop-menu-with-css-only/
Download: http://www.box.net/shared/paoqo8y1lt


CSS menu dropdown sem Javascripting ou hacks



Demonstração: http://www.texaswebdevelopers.com/blog/examples/ddmenu2.asp
Artigo: http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129
Download: Não


Criar Vimeo semelhantes de navegação superior



Demonstração: http://www.jankoatwarpspeed.com/examples/vimeo_navigation/
Artigo: http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
Download: http://www.jankoatwarpspeed.com/file.axd?file=2009 2fvimeo_navigation.zip% 2f1%


ADxMenu



Demonstração: http://aplus.rs/adxmenu/examples/htb/
Artigo: http://aplus.rs/adxmenu/
Download: http://aplus.rs/adxmenu/adxmenu-v4.zip


A CSS Grande Horizontal menu drop-down



Demonstração: http://sperling.com/examples/menuh/
Artigo: http://sperling.com/examples/menuh/
Download: http://sperling.com/examples/menuh/menuh.css


menus CSS



Demonstração: http://www.howtocreate.co.uk/tutorials/testMenu.html
Artigo: http://www.howtocreate.co.uk/tutorials/testMenu.html
Download: Não


Pure CSS Menu Olho de Peixe



expandDown http://www.jampmark.com/html+css-techniques-demos/pure-css-fish-eye-menu-demo.html #: Demo
Artigo: http://www.jampmark.com/html+css-techniques/pure-css-fish-eye-menu.html
Download: http://www.jampmark.com/downloads/javascript-html-css-codes/pure-css-fish-eye-menu.html


Um menu centrada com o gradiente e dois ponteiros



Demonstração: http://www.cssplay.co.uk/menus/two_points.html
Artigo: http://www.cssplay.co.uk/menus/two_points.html
Download: Não


Criar um menu Advanced CSS3



Demonstração: http://blog.cameronbaney.com/tutorials/cbdb-menu/demo.html
Artigo: http://blog.cameronbaney.com/tutorials/advanced-css3-menu/
Download: http://blog.cameronbaney.com/tutorials/cbdb-menu/cbdb-menu.zip


Menu Solid Block



Demonstração: http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
Artigo: http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
Download: http://www.dynamicdrive.com/cssexamples/media/blockdefault.gif
http://www.dynamicdrive.com/cssexamples/media/blockactive.gif


Liso Menu Pointer




Demonstração: http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
Artigo: http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
Download: http://www.dynamicdrive.com/cssexamples/media/rightround.gif
http://www.dynamicdrive.com/cssexamples/media/pointer.gif


Liso Menu Pointer 2



Demonstração: http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
Artigo: http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
Download: http://www.dynamicdrive.com/cssexamples/media/rightround2.gif
http://www.dynamicdrive.com/cssexamples/media/pointer.gif


Como criar um Menu CSS Usando Sprites Imagem



Demonstração: http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html
Artigo: http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites
Download: http://line25.com/wp-content/uploads/2009/css-menu/demo/awesome-menu.zip


CSS Sprite Navegação Tutorial



Demonstração: http://www.ehousestudio.com/assets/downloads/sprite/
Artigo: http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial
Download: http://www.ehousestudio.com/assets/downloads/sprite.zip


Sobreposição CSS Menu Tabs



Demonstração: http://www.tutorialsphere.com/homemade/uploads/2009/02/css-overlapping-tabs-menu.html
Artigo: http://www.tutorialsphere.com/homemade/2009/02/18/css-overlapping-tabs-menu
Download: http://www.tutorialsphere.com/homemade/uploads/2009/02/tabs.gif


Menus de navegação CSS



Demo: Não
Artigo: http://www.jacorre.com/design/cssnavmenus.htm
Download: Não


Menu Chunky CSS3



Demonstração: http://zubeta.com/demo-menu.html
Artigo: http://zubeta.com/css3-menu-demo.html
Download: Não


Criando uma barra de navegação não vidrados div



Demonstração: http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/
Artigo: http://www.james-blogs.com/2009/01/07/creating-a-glassy-non-div-navigation-bar/
Download: http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/nav-tab-bg.png


Centrada guias com CSS



Demonstração: http://24ways.org/examples/centered-tabs-with-css/final.html
Artigo: http://24ways.org/2005/centered-tabs-with-css
Download: Não


barra de navegação da Apple usando apenas CSS



Demonstração: http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css
Artigo: http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css
Download: Não


Animado guias horizontais



Demonstração: http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
Artigo: http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
Download: http://www.dynamicdrive.com/cssexamples/media/tab-blue-right.gif
http://www.dynamicdrive.com/cssexamples/media/tab-blue-left.gif


Um botão Menu Horizontal - A maneira mais fácil



Demonstração: http://www.cssplay.co.uk/menus/listnine.html
Artigo: http://www.cssplay.co.uk/menus/tutorial.html
Download: Não




fonte e créditos:
http://www.bloggertipandtrick.net/2010/11/30-pure-css-horizontal-menus-tutorials.html 
Clique aqui e Leia Mais +++►

Google+ Followers

Postagens populares

 
|Template by ebds|https://menu3x.blogspot.com|