30+ “Horizontal” Navigation Menus For Blogger With CSS & HTML Codes

Before that I never post how to create a horizontal navigation menu tab . May exist between blogger friends who find difficulty in putting the CSS code in the template editing stages, for it to post this time I tried to give a mild solution of dish 30 horizontal menu tab instant ready-made gadgets just by adding a HTML / JavaScript and placed the code tab on the item, as well as emphasize the navigation tabs will be urgent functions on a template.

Add Floating Spoiler Menu

Hi, guys! Now, we will try to add floating spoiler menu. This spoiler menu is difference with others. We don't need to click the button to display the menu. Just put your cursor on this menu, and the menu wil be slide out. Want to see the DEMO? Now, if you wanna add floating spoiler menu into your blog, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Chose "HTML/Java Script"
4. Add the code below


<style text-type="CSS">
#bmenu{
position:fixed;
right:5px;
center:0px;
background-color:#000;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0606;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}

#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}

#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}

#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}

#bmenu li a:hover{
color:#fff;}

#bmenu:hover{
z-index:5;
height:175px;
</style>

<div id="bmenu">
<h3>
TITLE</h3>
<ul>
<li><a href="#">FBT-1</a></li>
<li><a href="#">FBT-2</a></li>
<li><a href="#">FBT-3</a></li>
<li><a href="#">FBT-4</a></li>
<li><a href="#">FBT-5</a></li>
</ul>
</div>


Customize:
=> The position of floating spoiler menu
=> The title of this menu
=> The title and link location

5. Click SAVE

Cum se face un menu drop-down

Acesta este codul:

<form name="jump"> <div align="center"> <select name="menu" style="background-color: 99CCFF; color: white; font-family: ARIAL; font-size: 20px;"> <option selected="">Titlul categoriei aici</option> <option value="link">text</option> <option value="link">text</option> <option value="link">text</option> <option value="link">text</option> <option value="link">text</option> </select> <input onclick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" type="button" value="GO" /></div> </form>

Exemplu:

 Alege o categorie  Blogger  Bani pe net  Retele de socializare  Games  Diverse 

Modificati in cod:
Cu rosu- culoarea de fundal al casuteti  (Codurile culorilor aici)
Cu portocaliu- culoarea textului din casuta
Cu verde- fontul textului
Cu albastru- marimea textului
Cu roz- categoriile
Cu bleu- adresa url

Floating Menu Script

Description: This cross-browser menu stays static on the left hand corner of the browser via a gentle "floating" action. The result is an non-abrupt, smooth transition to reappearing into view for the menu.

Two interesting features of this script are 1) Support for arbitrary rich HTML, so you can float "anything." 2) The menu can be specified to float either from the top or bottom of the screen (in demo, the later is used).

Simply insert the below code to the END of your document, right above the </BODY> tag.



<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>


<layer id="divStayTopLeft">


<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" bgcolor="#FFFFCC">
      <p align="center"><b><font size="4">Menu</font></b></td>
  </tr>
  <tr>
    <td width="100%" bgcolor="#FFFFFF">
      <p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
       <a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
       <a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
       <a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
       <a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>
  </tr>
</table>
<!--END OF EDIT-->


</layer>




<script type="text/javascript">


/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/


//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"


if (!document.layers)
document.write('</div>')


function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

CSS Floating Menu

This page contains code for a CSS floating menu bar.

Also known as "fixed menus" and "hovering menus", floating menus stay in a fixed position when you scroll the page. They appear to "float" on top of the page as you scroll.

Example of a Floating Menu

The menu to the left is an example of a floating menu. As you scroll down this page, you will notice the menu stays fixed in the same position on the screen.

Create A Floating Menu

It is actually very easy to create a floating menu bar. The operative code isposition:fixed.

Having said this, you may have to play around a bit with the placement of your menu so that it doesn't get in the way of anything that it shouldn't.

Example Code

Here is the CSS code that was used to create the floating menu to the side:

<style>
div.floating-menu {position:fixed;background:#fff4c8;border:1px solid #ffcc00;width:150px;z-index:100;}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
</style>
<div class="floating-menu">
<h3>Floating Menu</h3>
<a href="http://www.quackit.com/css/">CSS</a>
<a href="http://www.quackit.com/html/">HTML</a>
<a href="http://www.quackit.com/javascript/">JavaScript</a>
<a href="http://www.quackit.com/coldfusion/">ColdFusion</a>
<a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a>
</div>

Feel free to change the width, color, and other properties as you wish (as long as you don't remove position:fixed).
As mentioned, you may also need to play around with the placement of your fixed menu. You can remove/change the z-index:100 if you don't want the menu to float on top of everything.

Older Browsers

Note that this code may not work in older browsers. This is because some older browsers don't support position:fixed. If the above example doesn't work for you, this could be the reason. In that case, try using a newer browser.

CSS Floating Menu from Quackit.com