১. মেনু নাম্বার ওয়ান। এই মেনুটা ব্ল্যাক অর্থাৎ কালো স্টাইলের Thesis থিম এ আমি প্রায়ই দেখি।https://sites.google.com/site/shiblyy111/top-menu/top.png.menu {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
}
.menu li {
float:left;
font-family:”Lucida Sans Unicode”,”Bitstream Vera Sans”,”Trebuchet Unicode MS”,”Lucida Grande”,Verdana,Helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0;
padding:0;
}
.menu a {
background:#333333 url(
http://2.bp.blogspot.com/_66wIGDjagHk/Sg3C64RbjJI/AAAAAAAAAY4/19Yw1ZFLiJg/s1600/seperator.gif) no-repeat scroll right bottom;
color:#CCCCCC;
display:block;
float:left;
margin:0;
padding:8px 12px;
text-decoration:none;
}
.menu a:hover {
background:#2580A2 url(
http://2.bp.blogspot.com/_66wIGDjagHk/Sg3DJ9YDADI/AAAAAAAAAZA/b70HFM1VaBo/s1600/hover.gif) no-repeat scroll center bottom;
color:#FFFFFF;
padding-bottom:8px;
}
#busca {
float:right;
line-height:35px;
}
#menu-wrapper {
margin:0 auto;
width:990px;
}
এবার ]]</b:skin> এর ওপর ওপরে কোড গুলো পেষ্ট করে দিন।
তারপর একটা যায়গায় <div id=’content-wrapper’> লেখা আছে তার ওপর নিচের কোডটা পেষ্ট করেদিন। আর যদি একটা হেডারের ওপর লাগাতে চান তাহলে <div id=’header-wrapper’> এর নিচে পেষ্ট করে দিন।
<div id=’submenu’>
<div id=’menu-wrapper’>
<ul class=’menu’>
<li><a expr:href=’data:blog.homepageUrl’>Home[/url]</li>
<li><a href=’#’ title=’Products’>Products[/url]</li>
<li><a href=’#’ title=’Services’>Services[/url]</li>
<li><a href=’#’ title=’Support’>Support[/url]</li>
</ul>
</div>
</div>
২. এটার নির্মাতা 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[/url]</li>
<li>
<a href=’#'>sab1[/url]
<ul>
<li>
<a href=’#'>Sab2[/url]
<ul>
<li><a href=’#'>Sab3[/url]</li>
<li><a href=’#'>Sab3[/url]</li>
</ul>
</li>
<li><a href=’#'>sab2[/url]</li>
</ul>
</li>
<li><a href=’#'>sab1[/url]
<ul>
<li><a href=’#'>sab2[/url]</li>
<li><a href=’#'>sab2[/url]</li>
</ul>
</li>
<li><a href=’#'>sab1[/url]
<ul>
<li><a href=’#k’>sab2[/url]</li>
</ul></li>
<li><a href=’/'>sab1[/url]</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’> এর নিচে পেষ্ট করে দিন।
