আসসালামুয়ালাইকুম, কেমন আছেন ?? অনেকদিন পর টেকটিউন্স এ পোস্ট করতেসি ।
পোস্ট টি ভাল লাগলে অবশ্যই শেয়ার করবেন !!!
আমি ইন শা আল্লাহ আপনাদের সাথে আরও কিছু টিউটোরিয়াল শেয়ার করব !!!!
আই মেনু গুলা আপনি আপনার ব্লগার অথবা অন্ন প্লাটফরম এর ওয়েবসাইট এ বসাতে পারবেন ।
আপনি যদি ব্লগার বেবহার করেন তাহলে, কিভাবে এড করবেন , টা আমি এখন জানাচ্ছি।
সবগুলা কোড একি ভাবে এড করবেন। কোড গুলা আপনার ব্লগ এ যোগ করার অনেক উপায় আছে ।
১ম উপায় আপনার ব্লগার এর ড্যাশবোর্ড এ জান , তারপর EDIT HTML এ গিয়ে যেকোনো একটি কোড খুজে বের করুন
<div id='header-wrapper'> or <div id='outer-wrapper'> , তারপর আপনার জেই মেনুটা পছন্দ হয় ওইটার কোড উপরের কোড এর নিছে পেস্ট করে সেভ করুন।
২য় উপাই অতবা আপনি চাইলে HTML/JAVASCRIPT এ সব কোড পেস্ট করে সেভ করতে পারেন ( মনে রাখবেন ADD A GADGET আপনার ব্লগের -HEADER এর নিছের টা সিলেক্ট করবেন )  । তাহলে সুরু করা জাক আল্লাহর নাম নিয়ে।

<style>
nav ul {
padding: 0;
margin: 0;
list-style: none;
}
/* http://livemecca.blogspot.com/ #Rashedul Islam */
nav li {
float: left;
}
nav a {
float: left;
color: #eee;
margin: 0 5px;
padding: 3px;
text-decoration: none;
border: 1px solid #831608;
font: bold 14px Arial, Helvetica;
background-color: #831608;
background-image: linear-gradient(#bb413b, #831608);
border-radius: 5px;
text-shadow: 0 -1px 0 rgba(0,0,0,.8);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
nav a:hover {
background-color: #bb413b;
background-image: linear-gradient(#831608, #bb413b);
}
nav a:active {
background: #bb413b;
position: relative;
top: 2px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}
nav span {
border: 1px dashed #eba1a3;
display: inline-block;
padding: 4px 15px;
cursor: pointer;
background-color: #bb413b;
background-image: linear-gradient(#d4463c, #aa2618);
}
nav a:hover span {
background-color: #bb413b;
background-image: linear-gradient(#aa2618, #d4463c);
}
font: bold 14px Arial, Helvetica;
</style>                  
<nav>
    <ul>
        <li><a href="http://livemecca.blogspot.com/"><span>Home</span></a></li>
        <li><a href="#"><span>Categories</span></a></li>
        <li><a href="#"><span>About</span></a></li>           
        <li><a href="#"><span>Portfolio</span></a></li>
        <li><a href="#"><span>Contact</span></a></li>
    </ul>
</nav>
 

<style>
nav{
width: 960px;
margin: 80px auto;
text-align: center;
}
/* http://livemecca.blogspot.com/ #Rashedul Islam */
nav ul{
margin: 0;
padding: 0;
}
nav li{
margin: 0 10px; /* Add some horizontal spacing */
display: inline-block;
*display: inline;  /* IE7 and below */
zoom: 1;
}
/* http://livemecca.blogspot.com/ #Rashedul Islam */
nav a{
display: inline-block;
position: relative;
padding: 8px 15px;
border: 2px solid #fff;
text-decoration: none;
color: #999;
font: bold 14px 'Lucida sans', Arial, Helvetica;
background-color: #eaeaea;
background-image: linear-gradient(top, #eaeaea, #fff);
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
0 0 1px 0 rgba(0, 0, 0, .2),
0 2px 2px rgba(0, 0, 0, .3),
0 10px 10px -5px rgba(0, 0, 0, .2);
}
/* http://livemecca.blogspot.com/ #Rashedul Islam */
nav a:hover{
background-color: #eee;
background-image: linear-gradient(top, #eee, #fff);
}
nav a:active{
top: 1px; /* Simulate the push button effect */
background: #f5f5f5;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
0 0 1px 0px rgba(0, 0, 0, .2),
0 1px 2px rgba(0, 0, 0, .3);
}
nav a::before{
content: '';
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
z-index: -1;
background-color: #e3e3e3;
background-image: linear-gradient(top, #e3e3e3, #f7f7f7);
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;
}
nav a:active::before{
top: -11px; /* Hey you, don't move! */
}
</style>
<nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Categories</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

কোড
<style>
nav  {
    display: block;
    width: 100%;
    overflow: hidden;
}
/* http://livemecca.blogspot.com/ #Rashedul Islam */
nav ul {
    margin: 80px 0 20px 0;
    padding: .7em;
    float: left;
    list-style: none;
    background: #444;
    background: rgba(0,0,0,.2);
    border-radius: .5em;    
    box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; 
}
/* http://livemecca.blogspot.com/ #Rashedul Islam */
nav li {
    float:left;
}
/* http://livemecca.blogspot.com/ #Rashedul Islam */
nav a {
    float:left;
    padding: .8em 1.5em;
    text-decoration: none;
    color: #555;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-width: 1px;
    border-style: solid;
    border-color: #fff #ccc #999 #eee;
    background: #c1c1c1;
    background: linear-gradient(#f5f5f5, #c1c1c1);            
 }
/* http://livemecca.blogspot.com/ #Rashedul Islam */ 
nav a:hover, nav a:focus {
    outline: 0;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
    background: #fac754;
    background: linear-gradient(#fac754, #f8ac00);
}
 
nav a:active {
    box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
 /* http://livemecca.blogspot.com/ #Rashedul Islam */
nav li:first-child a {
    border-left: 0;
    border-radius: 4px 0 0 4px;            
}
 
nav li:last-child a {
    border-right: 0;
    border-radius: 0 4px 4px 0;            
}
</style>
<nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Categories</a></li>
        <li><a href="">About</a></li>               
        <li><a href="">Portfolio</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

মেনু ১ এর এই অসাধারণ মেনু টা আমি Scrip tutorials থেকে কালেট করেচি।