मेनु कसरी बनाउने ?

मैले यो पोस्ट मा सबै भन्दा महत्व पुर्ण पोस्ट गर्न जादै छु जुन चाही ब्लग को प्राण हो । अहिले सम्म तपाइ हरु लाई अन्य महत्व पुर्ण कुरा सिकाए तर कसरी मेनु राख्ने भनेर सिकाएको छैन तसर्थ यो पोस्ट मा मेनु बिसेश रहनेछ । हेरौ तपाइ को लागी कती को उपायोगी हुनेछ । यस पोस्ट अन्तर्गत तपाइले Drop down मेनु कसरी बनाउने भन्ने कुरा सिक्नु हुनेछ भन्ने आसा लिएको छु । ड्रप डाउन भन्नाले तपाइले मेरो ब्लग मा डिजाइन मा माउस लादा त्यसको तल ग्राफिक डिजाइन , वेबसाईट डिजाइन र अन्य भनेर देखिन्छ यस्तै बनाउनु लाई Drop Down मेनु भनिन्छ । अब लागौ कसरी राख्ने तर्फ ।


सबै भन्दा पहिले तपाइले लागिन गरेर EDIT HTML सम्मा पुग्नु होस 
यदी बिर्सनु भयो भने पुरानो पोस्ट हेर्नु होस 

1. एडिट HTML सम्म पुगी सके पछी तपाइले यो कोड खोज्नु होस   </head> Shortcut code { CTRL + F and </head> }।
2. अब तपाइले </head> कोड भन्दा माथी तल को कोड पेस्ट गर्नुहोस ।

<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}
</style>


<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://samjhanakophool.blogspot.com-->

    
        3. तपाइले टेम्प्लेट सेभ गर्नु भन्दा पहिले तपाइले कोड मा थोरै परिवर्तन गर्नुहोस मेरो मतलब कलर मा परिवर्तन गर्नुहोस । 

कलर को कोड को लागी तपाइले यो साइट प्रयोग गर्न सक्नु हुनेछ । Click Here
    4. कलर लाई परिवर्तन गरी सक्नु भए पछी तपाइले टेम्प्लेट लाई शेभ गर्नुहोस
    5. "Layout" -> "Page Elements"
and click on "Add a Gadget", select it as "HTML/JavaScript"  and paste गर्नुहोस तल को कोड  तपाइ को आवस्यकता अनुसार  

<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://samjhanakophool.blogspot.com/search/label/Blogger Tips">Blogger Help</a></li>
</ul>    

Note : तपाइले माथी को कोड मा # को सट्टा मा तपाइको लिन्क राख्नुहोस जस्तै होम मा www.samjhanakophool.blogspot.com भनेर राख्नुहोस ।
थप्न चाहनु भएको खन्ड मा  
न्यू थप्नु चाहनु भएको मा मेरो मतलब तपाइले मेनु र सब मेनु दुबै राख्नु खोज्नु भयो भने यसरि थप्नु होस 

</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>

सब मेनु मात्र बनाउन को लागी तपाइले  Add or Remove
</ul> भन्दा माथी 

<li><a href="#">Semitransparent</a></li>

यसरि राखी दिनुहोस

for Example

</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>

लाई परिवर्तन गर्दा 

</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">New Sub menu added</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>

थपिएको लाई रातो कलर गरिएको छ 
Now Save HTML/JavaScript Box
Thank You for Viewing this Post
Jiban