jQuery | sidemenu එකක්‌ හදමු

ඔන්න ආපහු ආවා jQuery එක්‌ක. අද බලමු තවත් මෙනු එකක්‌ කොහොමද හදන්නෙ කියලා. මේකට මම භවිතා කරන්නේ next() . next() මගින් අපිට යම් element එකක ඊලගට ඇති element එක ගන්න පුලුවන්.

මුලින්ම අපි html list එකක්‌ මගින් මෙනු එකෙහි සැකැස්‌ම හදමු.

<ul id="nav">
    <li><a class="main" href="#">Home</a>
     <ul>
         <li><a href="#">my blog</a></li>
            <li><a href="#">my facebook profile</a></li>
            <li><a href="#">my website</a></li>
        </ul>
    </li>
    <li><a class="main" href="#">SBU</a>
     <ul>
         <li><a href="#">Sinhala Bloggers Union</a></li>
            <li><a href="#">Sinhala Blog Reader</a></li>
            <li><a href="#">MyBlog.lk</a></li>
            <li><a href="#">Sinhala Blogs Facebook App</a></li>
        </ul>
    </li>
    <li><a class="main" href="#">Links</a>
  <ul>
            <li><a href="#">google</a></li>
            <li><a href="#">youtube</a></li>
            <li><a href="#">facebook</a></li>
  </ul>
    </li>
    <li><a class="main" href="#">About Me</a></li>
    <li><a class="main" href="#">Contact</a></li>
</ul>

දැන් එය මෙසේ දිස්‌වේවී. දැන් අපේ මෙනු එක css මගින් style කරන්න වෙලාව.

පිටුවේ ඇති සියලුම element වල padding සහ margin, 0 කිරීම සදහා css ගොනුවට * { margin:0; padding0; } කේතය අතුල් කරනවා. ඉන් පසු ul (unordered list) එකෙහි li (list item) වල bullet එක ඉවත් කිරීමට සහ එක li තුල ඉඩ ලබා දීමට li { list-style:none; line-height:36px; display:inline; } ලෙස යොදනවා. menu එකෙහි ප්‍රමානය රඳවා ගැනීමට මම wrapper div එකක්‌ තුලට menu list එක දමා තිබෙනවා. එහි පලල 350px ලෙස දෙමු.

* { 
    margin:0; 
    padding:0; 
}

li { 
    list-style:none; 
    line-height:36px;  
    display:inline; 
}

#wrapper { 
    width:350px; 
    margin:30px 0 0 30px;
}

එලෙසම මෙනු එකෙහි ලින්ක්‌ සදහා css style ලබා දෙමු.

#nav li a, #nav li a:visited { 
    display:block; 
    color:#fff; 
    text-decoration:none; 
    padding-left:15px; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    font-style:italic; 
    font-size:22px; 
    border-bottom:1px solid #fff; 
    background:#3b5998 url(arrow.gif) top right no-repeat; 
}
#nav li a:hover, a.active_link { 
    background-position:bottom right!important; 
}

#nav li ul li a, #nav li ul li a:visited { 
    font-weight:normal!important; 
    color:#3b5998!important; 
    background:#d8dfea!important; 
}
#nav li ul li a:hover { 
    background:#c6d5ed!important; 
}

මෙහි ලින්ක්‌ එකේ පසුබිම් රූපයක්‌ ලෙස මම කුඩා ඊතලයක රූපයක්‌ photoshop මගින් සාදා ගත්තා. පහත ආකාරයට එම රූපයේ ඉහල කොටසින් ලින්ක්‌ එකෙහි සාමාන්‍ය පෙනුමත් පහල කොටසින් ලින්ක්‌ එක hover කල පසු පෙනුමත් දැක්‌වෙන ලෙස රූපය සාදාගෙන තිබෙනවා.css මගින් ලින්ක්‌ hover එක කල විට පසුබිම් රූපයේ පිහිටීම වෙනස්‌ කිරීමෙන් අපිට මෙනු එකෙහි දැක්‌වෙන ආකාරයේ effect එක ලබාගන්නට පුලුවන්.

දැන් අපේ මෙනු එක css style සමග මෙසේ පෙනේවි.

සම්පූර්ණ css කේතය

* { 
    margin:0; 
    padding:0;
}

#wrapper {  
    width:350px;  
    margin:30px 0 0 30px; 
}

li {  
    list-style:none;  
    line-height:36px;
    display:inline;
}

#nav li a, #nav li a:visited {  
    display:block;  
    color:#fff;  
    text-decoration:none;  
    padding-left:15px;  
    font-family:Georgia, "Times New Roman", Times, serif;  
    font-style:italic;  
    font-size:22px;  
    border-bottom:1px solid #fff;  
    background:#3b5998 url(arrow.gif) top right no-repeat; 
}

#nav li a:hover, a.active_link {  
    background-position:bottom right!important; 
}

#nav li ul li a, #nav li ul li a:visited {  
    font-weight:normal!important;  
    color:#3b5998!important;  
    background:#d8dfea!important; 
}

#nav li ul li a:hover {  
    background:#c6d5ed!important; 
}

දැන් අපි jquery මගින් මෙනු එකට සජීවී බවක්‌ එකතු කරමු. ප්‍රථමයෙන් jquery ගොනුව ඔබේ පිටුවට එකතු කරගන්න. නවතම ගොනුව jquery.com වෙතින් ලබා ගන්නට පුලුවන්.

$(document).ready(function(){
    $('#nav li ul').hide();
    $('#nav li a.main').click(function(){
        $('#nav li ul:visible').slideUp('normal');
        $('.active_link').removeClass('active_link');
        $(this).addClass('active_link').next().slideDown('slow');
    });
});

මුලින්ම අපි sub menu සගවමු. මේ සදහා document ready function හි $('#nav li ul') මගින් #nav හි සියලු li තුල ඇති ul ලබාගෙන (එනම් sub menu), hide() මගින් ඒවා සැගවිය හැකියි.

ඉන්පසු මෙනු එකෙහි main class එක සහිත සියලු ලින්ක්‌ සඳහා click function එකක් යොදනවා.එ තුල මුලින්ම කර ඇත්තේ දැනටමත් sub menu විවෘතව ඇත්ද යන්න බැලීමයි. විවෘතව ඇත්නම් ඒවා slide up වෙනවා. මෙහි active_link class එක භාවිතා කරන්නේ ලින්ක්‌ එකෙහි පසුබිම් රූපය වන ඊතලය වෙනස්‌ කිරීම සදහායි. active link class එක ලින්ක්‌ එකට යෙදූ විට ඊතලය පහලට යොමුවී තිබෙන අතර active link class එක ලින්ක්‌ එකේ නැති විට ඊතලය දකුණට යොමු වෙනවා.

අවසාන පේලියෙන් කියන්නේ ඔබ ක්‌ලික්‌ කල ලින්ක්‌ එකට ($(this)), active_link class එක එකතු කරන ලෙසත් ඉන් පසු එම ලින්ක්‌ එකට පසුව ඊලගට ඇති element එක වන sub menu එක slide down කරන ලෙසයි.

අවසාන ප්‍රතිඵලය මෙසේ දිස්‌වේවි.