Friday, December 12, 2008

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

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

jquery menu

මුලින්ම අපි 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 එක ලබාගන්නට පුලුවන්.

menu background arrow

දැන් අපේ මෙනු එක 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 කරන ලෙසයි.

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

10 comments:

Malinthe Samarakoon said...

නියමයි!

Angel Anu said...

ගොඩක්‌ ප්‍රයෝජනවත් දෙයක්‌... බොහොමත්ම ස්‌තුතියි!!! :)

නිලන්ත පියසිරි said...

ඔබ ගේ jQuery වැඩ ටික නම් නියමයි. jQuery ගැන පොඩි හැදින්වීමකුත් සිංහලෙන් ලියන්න පුළුවන් නම් හොඳයි. කෙසේ නමුත් ඉතාමත් වැදගත් ලිපියක්. (වෙසසින් මට)

SRIshanu said...

මැක්සා...!

පිං අයිතිවේවා!! :)

har said...

ෂා, මරු නෙ

ඇත්තටම වෙබ් සයිට් එකක් කරද්දි මාර විදිහට මේ වගේ සටහන් වටිනව.

තිලිණ said...

ප්‍රතිචාර වලට බොහොම ස්‌තුතියි!

Kolama said...

Hi Thilina,

Thank you for teaching us about these new techniques through your blog. This is really useful for beginner and the guys who need to update their knowledge with the new web technology!... Keep it UP.

Good Luck !

Kolama :D

Malinda said...

sorry machang .. i didn't get any.simply greek to me :( anyway sounds like smthing really interesting ..Best of LUCK n Keep up d good work

Malinda said...

අයිය දෙයියෙකනෙ. මම මෙහෙම එකක් හොය හොයා හටියෙ. සිංහලෙන්ම හම්බුන එක මරු

Kanishka Nalin Hennayake said...

නියමයි!!!සිංහලෙන්ම තියනචා!!!