ফ্রি ব্লগারের জন্য ৩টি টপ মেনু

২. এটার নির্মাতা Bangla Haks।

/* Navigation ———-*/
#NavbarMenu {
background: #A0CFEC;
width: 980px;
height: 34px;
font-size: 12px;
font-weight: bold;
font-family: ‘AdorshoLipi’, Arial, Tahoma, Verdana;
color: #000000;
margin: 0;
padding: 0;
float:left;
}
#NavbarMenuleft {
width: 690px;
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 285px;
float: right;
margin: 0;
padding: 6px 0 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #2008AF;
display: block;
font-size: 14px;
font-weight: bold;
font-family: Georgia, Times New Roman;
margin: 0;
padding: 5px 10px 5px;
}
#nav li a:hover, #nav li a:active {

color: #000000;
font-weight: bold;
margin: 0;
padding: 5px 10px 5px;
text-decoration: underline;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #A0CFEC;
width: 100px;
color: #2008AF;
font-size: 14px;
font-family: ‘AdorshoLipi’, Georgia, Times New Roman;
font-weight: normal;
float: none;
margin: 0;
padding: 3px 4px;
border-bottom: 1px solid #FFF;

}
#nav li li a:hover, #nav li li a:active {

color: #000000;
padding: 3px 4px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 150px;
margin: 0;
padding: 0;
border-left:1px solid #BFC0C0;

}
#nav li ul a {
width: 100px;
}
#nav li ul ul {
margin: -28px 0 0 100px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

এবার ]]</b:skin> এর ওপর ওপরে কোড গুলো পেষ্ট করে দিন।
তারপর একটা যায়গায়  <div id=’content-wrapper’>   লেখা আছে তার ওপর নিচের কোডটা পেষ্ট করেদিন। আর যদি একটা হেডারের ওপর লাগাতে চান তাহলে     <div id=’header-wrapper’>  এর নিচে পেষ্ট করে দিন।

<div id=’NavbarMenu’>
<div id=’NavbarMenuleft’>
<ul id=’nav’>
<li><a expr:href=’data:blog.homepageUrl’>Home</a></li>
<li>
<a href=’#’>sab1</a>
<ul>
<li>
<a href=’#’>Sab2</a>
<ul>
<li><a href=’#’>Sab3</a></li>
<li><a href=’#’>Sab3</a></li>
</ul>
</li>
<li><a href=’#’>sab2</a></li>
</ul>
</li>
<li><a href=’#’>sab1</a>
<ul>
<li><a href=’#’>sab2</a></li>
<li><a href=’#’>sab2</a></li>
</ul>
</li>
<li><a href=’#’>sab1</a>
<ul>
<li><a href=’#k’>sab2</a></li>
</ul></li>
<li><a href=’/’>sab1</a></li>
</ul>
</div>

৩. এই বার মেনুর সর্বশেষ স্টাইল। এটা আমি আমার নিজের ব্লগের জন্য ডিজাইন করেছিলাম।

#menu {
background-color:#ff5b5b;
border-bottom:1px solid #DDDDDD;
border-right:1px solid #DDDDDD;
border-top:1px solid #DDDDDD;
height:28px;
margin:2px auto 0;
width:980px;
}
#menu ul {
border-left:1px solid #DDDDDD;
float:left;
font-family:’Trebuchet MS’,Trebuchet,Arial,Verdana,Sans-serif;
list-style-type:none;
margin:0;
padding:0;
width:980px;
}
#menu ul li {
border-right:1px solid #DDDDDD;
display:block;
float:left;
font-size:13px;
text-shadow: 2px 2px 2px
font-weight:lighter;
height:28px;
letter-spacing:1px;
line-height:14px;
margin-right:0;
padding:0;
text-transform:uppercase;
}
#menu ul li:hover {
background-position:left center;
background: #ffffff;
}
#menu ul li a:link, #menu ul li a:visited, #menu ul li a:active {
color:#000000;
display:block;
float:left;
height:28px;
margin:0;
padding:5px 20px 0;
text-transform:uppercase;
}
#menu .home, #menu .current_page_item {
background-color:#ff5b5b;
}
#menu .home a:link, #menu .home a:visited, #menu .current_page_item a:link, #menu .current_page_item a:visited {
background-position:right center;
background-repeat:no-repeat;
color:#000000;
}
#menu ul li a:hover {
background-position:right center;
background-repeat:no-repeat;
color:#000000;
height:28px;
text-decoration:underline;
}
#menu ul li ul {
width:180px;
}

.menunav li:hover ul, ul.menunav li.sfHover ul {
left:-1px;
top:25px;
}
.menunav li:hover li ul, .menunav li.sfHover li ul {
top:-9999px;
}
.menunav li li:hover ul, ul.menunav li li.sfHover ul {
border-top:1px solid #DDDDDD;
left:180px;
top:-1px;
}
.menunav li:hover ul, .menunav li li:hover ul {
top:-9999px;
}
.menunav li ul {
border-right:1px solid #DDDDDD;
position:absolute;
top:-9999px;
}
.menunav li {
border-bottom:1px solid #DDDDDD;
float:left;
position:relative;
}
.menunav ul li {
width:100%;
}
.menunav li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/libgt.png) repeat scroll 0 0;
height:auto !important;
padding:0;
}
.menunav li ul {
z-index:100;
}
.menunav li:hover a:link, .menunav li:hover a:visited {
color:#111111 !important;
text-decoration:underline;
}
.menunav li li:hover, .menunav li .current_page_item {
-moz-background-clip:border !important;
-moz-background-inline-policy:continuous !important;
-moz-background-origin:padding !important;
background:transparent url(images/libgth.png) repeat scroll 0 0 !important;
}
.menunav li li a:link, .menunav li li a:visited {
background-image:none !important;
float:left;
height:auto !important;
margin:0 !important;
padding:5px 20px !important;
}
এবার ]]</b:skin> এর ওপর ওপরে কোড গুলো পেষ্ট করে দিন।
তারপর একটা যায়গায়  <div id=’content-wrapper’>   লেখা আছে তার ওপর নিচের কোডটা পেষ্ট করেদিন। আর যদি একটা হেডারের ওপর লাগাতে চান তাহলে     <div id=’header-wrapper’>  এর নিচে পেষ্ট করে দিন।

মেনু গুলো কেমন লাগলো জানাবেন কিন্তু! আর যদি কোন সমস্যা হয় তাহলে আমি আছি। বলতে ভুলবেন না কিন্তু।