5 incríveis menus Drop down para seu blog

Unknown 22:25 blog , css , Drop down , menu 3 comentários

Cinco menus Drop down

Neste artigo, trouxemos 5 incríveis menus Drop down para você aplicar em seu blog.

Todo blogueiro sabe a importância de se ter um menu em seu blog para redirecionar os seus leitores para suas páginas estáticas, postagens específicas, e outros artigos, para dar um destaque em seu blog, sem que haja a necessidade do leitor ficar pesquisando.

E para isso, vários modelos de Templates personalizados ou não, possuem um menu e, normalmente, Drop down. Porém, às vezes, alguns Templates não possuem menus e os que possuem, talvez, não atendem as necessidades do blogueiro. Na maioria dos casos, o que manda é o estilo. E para isso, a maioria procura modelos diferentes de menus, para aplicar em seu blog.

Para aplicar o menu em seu blog, o processo de instalação é o mesmo. Para todos os menus Drop down.

Siga os seguintes passos dos menus, abaixo, para instalá-los:

Vá até o painel do seu Blogger, em seguida, selecione seu blog, e você verá o menu lateral. Selecione modelo e, logo em seguida, clique em editar HTML. Você verá uma caixa de códigos, e dentro do código fonte do seu blog, você deve instalá-los da seguinte maneira:

Para os modelos que possuem scripts ou .js deve-se colocar os scripts antes da tag </head>

Para aplicar o css deve-se aplicar antes da tag ]]></b:skin>

Para aplicar o html, que é a estrutura do menu, onde você vai colocar os nomes que aparecerão no menu, e os links para onde os leitores serão redirecionados, você deve prosseguir da seguinte maneira:

Procure pela tag </head>, e logo abaixo dela, cole a estrutura do html do menu. Caso seu menu fique muito no topo, coloque a estrutura html do menuDrop down um pouco mais abaixo. Lembrando que você deve aplicar sempre após o fechamento da tag </div>

Se ainda assim tiver dúvidas, coloque o estilo css e o script, no código fonte do seu template, e coloque a estrutura do html em um Gadget na página layout.

Escolha a opção html/javascript e cole o html.

Explicações feitas, vamos ao menu Drop down para seu blog!

Primeiro menu Drop down

css do menu Drop down

ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}

ul.tabs a
{
position: relative;
display: block;
}

/* dropdowns
*************************/

ul.dropdown
{
margin: 0;
padding: 0;
display: block;
position: absolute;
z-index: 999;
top: 100%;
width: 250px;
display: none;
left: 0;
}
ul.dropdown ul.dropdown
{
top: 0;
left: 95%;
}

ul.dropdown li
{
margin: 0;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
}

ul.dropdown li a
{
display: block;
}

/* menu-specifc
*************************/

#menu
{
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 40px;
background: #ffb35a url(images/topbg.gif) repeat-x;
border-bottom: 1px solid #000;
}

#menu ul
{
margin: 0 auto;
}

#menu ul li.hasmore
{
background: url(images/drophighlight.png) no-repeat center 27px;
}

#menu ul li h4
{
margin: 0;
}

#menu ul li h4 a
{
font-size: 14px;
color: #000;
font-weight: bold;
padding: 0 15px;
}

#menu ul li a
{
color: #9b2021;
padding-left: 4px;
}

#menu ul li a img
{
vertical-align: middle;
}

#menu ul li a:hover
{
background: url(images/topselectionleft.png) top left no-repeat;
}

#menu ul li a span
{
display: block;
padding: 0 15px 0 11px;
}

#menu ul li a:hover span
{
background: url(images/topselectionright.png) top right;
}

#menu ul.dropdown
{
padding: 10px;
background-image: url(images/dropdown.png);
overflow:hidden;
border-bottom: 1px solid #dc902f;
width: 290px;
}

#menu ul.dropdown li a
{
border-bottom: 1px solid #e5cd8e;
line-height: 30px;
overflow: hidden;
height: 30px;
}

#menu ul.dropdown li.last a
{
border-bottom-width: 0;
}

#menu ul.dropdown li a:hover
{
background: url(images/menuarrow.png) no-repeat left center;
}

#menu ul li h4 a:hover
{
background-image: none;
}

html do menu Drop down

<div id="menu">
<ul class="tabs">
<li><h4>
<a href="#">In the blog »</a></h4>
</li>
<li class="hasmore"><a href="#"><span>Recent</span></a>
<ul class="dropdown">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li class="last"><a href="#">Menu item 6</a></li>
</ul>
</li>
<li class="hasmore"><a href="#"><span>Topics</span></a>
<ul class="dropdown">
<li><a href="#">Topic 1</a></li>
<li><a href="#">Topic 2</a></li>
<li><a href="#">Topic 3</a></li>
<li class="last"><a href="#">Topic 4</a></li>
</ul>
</li>
<li><a href="#"><span><strong><img src="http://www.webdesigndev.com/wp-content/uploads/2009/07/images/feed-icon-14x14.png" width="14" height="14" alt="RSS"> Subscribe to RSS</strong></span></a></li>
<li><h4>
<a href="#">Elsewhere »</a></h4>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="hasmore"><a href="/about/#networks"><span>Networks</span></a>
<ul class="dropdown">
<li><a href="#">Twitter</a></li>
<li><a href="#">posterous</a></li>
<li><a href="#">SpeakerSite</a></li>
<li><a href="#">LinkedIn</a></li>
<li class="last"><a href="#">See more…</a></li>
</ul>
</li>
<li><a href="#"><span>Bookmarks</span></a></li>
</ul>
</div>

script do menu Drop down

Segundo menu Drop Down

Css do menu Drop down

script do menu Drop down

Html do menu Drop down

Terceiro menu Drop down

css do menu Drop down

.jquerycssmenu{
font: bold 12px Verdana;
border-bottom: 1px solid black;
padding-left: 15px; /*offset of tabs relative to browser left edge*/
}

.jquerycssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jquerycssmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jquerycssmenu ul li a{
display: block;
background: white url(http://www.dynamicdrive.com/cssexamples/media/tintbluedark.gif) top center repeat-x;;

/*background of tabs (default state)*/
padding: 5px 7px 4px 7px;
margin-right: 3px; /*spacing between tabs*/
border: 1px solid #778;
border-bottom-width: 0;
color: #2d2b2b;
text-decoration: none;
}

.jquerycssmenu ul li a:hover{
background-image: url(http://www.dynamicdrive.com/cssexamples/media/tintblue.gif) /*tab link background during

hover state*/
}
	
/*1st sub level menu*/
.jquerycssmenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
border-top: 1px solid black;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jquerycssmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jquerycssmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jquerycssmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
background: white;
color: black;
padding: 4px 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid black;
}

.jquerycssmenu ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 7px;
right: 5px;
}

.rightarrowclass{
position: absolute;
top: 5px;
right: 5px;
}

script do menu Drop down

/*********************
//* jQuery Multi Level CSS Menu (horizontal)- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//* Menu instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
//* Last modified: Sept 6th, 08'. Usage Terms: http://www.dynamicdrive.com/style/csslibrary/tos/
*********************/

//Specify full URL to down and right arrow images (25 is padding-right to add to top level LIs with drop

downs):
var arrowimages={down:['downarrowclass', '', 25], right:['rightarrowclass', '']}

var jquerycssmenu={

fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
	jQuery(document).ready(function($){
		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(),

subulh:$subul.outerHeight()}
			this.istopheader=$curobj.parents("ul").length==1? true : false
			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} :

{}).append(
				'<img src="http://www.dynamicdrive.com/cssexamples/media/arrow-down.gif'+

(this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
				+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
				+ '" style="border:0;" />'
			)
			$curobj.hover(
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
					var menuleft=this.istopheader? 0 : this._dimensions.w
					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>

$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) :

menuleft
					$targetul.css({left:menuleft+"px"}).fadeIn

(jquerycssmenu.fadesettings.overduration)
				},
				function(e){
					$(this).children("ul:eq(0)").fadeOut

(jquerycssmenu.fadesettings.outduration)
				}
			) //end hover
		}) //end $headers.each()
		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
	}) //end document.ready
}
}

//build menu with ID="myjquerymenu" on page:
jquerycssmenu.buildmenu("myjquerymenu", arrowimages)

</script>

Html do menu Drop down

Quarto menu Drop Down

script do menu Drop down

html do menu Drop down

Quinto menu Drop down

css do menu Drop down

ul, li{
padding: 0px;
margin: 0px;
}
ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(images/navigation.png) repeat-x scroll 0 0;
display:block;
height: 35px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
.dropmenu li{
position: relative;
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
.dropmenu li a{
height: 22px;
padding: 9px 30px 0px 15px;
display: block;
cursor: point;
border-right: solid 1px #4a779d;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
}
.dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent url(images/arrow_up.png) repeat-x scroll 0 0;
position: absolute;
top: 12px;
right: 10px;
}
.dropmenu li  a:hover span{
background:transparent url(images/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
.dropmenu ul{
position: absolute;
display: none;
width: 140px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
}
.dropmenu ul li{
border: 0;
float: none;
}
.dropmenu ul a {
border: 1px solid #ccc;
border-bottom: 0;
white-space: nowrap;
display:block;
color: #0657AD;
text-decoration: underline;
text-transform: none;
}
a.selected, a:hover{
color: #0657AD !important;
background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
background:transparent url(images/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu ul a:hover {
color:#F67A00 !important;
text-decoration: none;
background-color: #F0F0F0;
background-image: none;
}
.dropmenu div ul{
position: relative;
display: block;
}
.dropmenu li div{
background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
border: 1px solid #ccc;
padding: 5px;
display: none;
position: absolute;
}
.dropmenu li div ul{
border: none;
background: none;
position: relative !important;
}
.dropmenu li div a{
border: none;
border-bottom: 1px solid #ccc;
}
.dropmenu li div div{
display: block;
position: relative;
background: none;
border: none;
}
.dropmenu li div div a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.dropmenu li div div a:hover{
color: #000;
text-decoration: none;
}
ul.left{
float: left;
width: 145px;
}
ul.right{
float: right;
width: 145px;
}
.small{
color: #666;
font-size: 10px;
padding: 10px 5px 8px 5px !important;
display: block;
clear: both;
}
.products{
width: 300px;
padding: 15px !important;
}
.products ul{
width: 100%;
}
.products ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
.products h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
.products p{
color: #666;
font-size: 10px;
padding: 0px;
margin: 0px;
}
.products img{
float: left;
padding-right: 10px;
}
.products  ul li a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.products  ul li  a:hover{
color: #000 !important;
text-decoration: none;
background: none !important;
}

.tutorials{
width: 300px;
}

.login{
padding: 15px !important;
width: 180px;
}
input{
border:1px solid #4A779D;
padding: 3px 8px;
margin-bottom: 8px;
width: 164px;
}
label{
padding: 0px 0px 4px 0px;
display:block;
}
button{
background: #4A779D url(images/navigation.png) repeat-x scroll 0 0;
color: #FFF;
border:1px solid #4A779D;
padding: 4px 10px;
width: 180px;
}

script do menu Drop down

html do menu Drop down

<ul id="nav-one" class="dropmenu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Forum</a> 
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Examples</a></li>
<li><a href="#">Your work</a></li>
</ul>
</li>
<li>
<a href="#item3">Downloads</a>
<ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Custom projects</a></li>
</ul>
</li>
<li>
<a href="#">Products</a>
<div class="products">
					<ul>
<li><img src="http://1.s3.envato.com/files/1075971/images/236872.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>
Featured Box</h2>
<p>
<a href="#">More information about this product</a></p>
</li>
<li><img src="http://1.s3.envato.com/files/1075971/images/242702.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>
Mod Rewriter</h2>
<p>
<a href="#">More information about this product</a></p>
</li>
<li><img src="http://1.s3.envato.com/files/1075971/images/242177.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>
Byte Scrambler</h2>
<p>
<a href="#">More information about this product</a></p>
</li>
<li><img src="http://1.s3.envato.com/files/1075971/images/226138.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>
Image Processor</h2>
<p>
<a href="#">More information about this product</a></p>
</li>
<li><img src="http://1.s3.envato.com/files/1075971/images/216794.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>
Registry Class</h2>
<p>
<a href="#">More information about this product</a></p>
</li>
<li><img src="http://1.s3.envato.com/files/1075971/images/211826.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>
Data Validation</h2>
<p>
<a href="#">More information about this product</a></p>
</li>
<li><img src="http://1.s3.envato.com/files/1075971/images/203708.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>
Ajax Tables</h2>
<p>
<a href="#">More information about this product</a></p>
</li>
</ul>
<div class="small">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
</div>
</li>

E, então? Já escolheu o seu? Comente!

3 comentários :

Brayan Valadares Cataldo18/07/2014, 01:52
muito dificil não vou conseguir fazer não entendo nada disso :(
ResponderExcluir
Respostas
RodSanLuc23/08/2014, 02:18
não deu certo. falta fechamento, fica em branco todo o blog
ResponderExcluir
Respostas

Adicionar comentário

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.

Assinar: Postar comentários ( Atom )

5 incríveis menus Drop down para seu blog

Cinco menus Drop down

Explicações feitas, vamos ao menu Drop down para seu blog!

Primeiro menu Drop down

Segundo menu Drop Down

Terceiro menu Drop down

Quarto menu Drop Down

Quinto menu Drop down

3 comentários :

Conheça nossos serviços

Cadastre seu email e receba novidades

Pesquise no Google

Quem está no blog agora

Visitantes do blog

Andrew Silva