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 කරන ලෙසයි.

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

jQuery | සරල jQuery වැඩ කිඩ

ඔන්න අපේ මලින්ත මලයත් දෙතුන් පාරක්‌ ම මතක්‌ කරපු නිසා හිතුන අද පොඩි jQuery වැඩ කෑලි ටිකක්‌ ලියන්න. jQuery ගැන කෙටි හැදින්වීමක්‌ සහ කෙටි ලිපියක්‌ මීට කලින් මම ලිව්වා. පහත සබැදි වලින් ඒවා බලන්න පුලුවන්.

jQuery javascript එකතුව ගැන කෙටි හැදින්වීමක්‌
jQuery එක්‌ක ලස්‌සන වෙන්න!
ඕනම element එකකට hover effect

අද අපි බලමු slide effect එකක්‌ කරන්නෙ කොහොමද කියලා.

උදාහරණය:

මගේ වෙබ් පිටුවේ ඉහල දකුණු කෙලවරේ contact me, click කර බලන්න. contact ෆෝරමයක්‌ පහලට එනු පෙනේවි. අද අපි හදන්න යන්නේ මීට සමාන දෙයක්‌.

අපි මුලින්ම පිටුවට toggle button එකක්‌ එකතු කරමු. මේ සදහා මම භවිතා කරන්නේ සාමාන්‍ය ලින්ක්‌ එකක්‌. මෙය වරක්‌ එබූ විට my_slide div එක පෙන්වීමටත් නැවත එබූ විට my_slide div එක නොපෙනී යාමටත් සකස්‌ කරමු.

html

<a href="#" class="my_button">show me the slide</a>

<div id="my_slide">
    <div id="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

css

#my_slide { 
    width:300px; 
    margin-top:20px; 
    background:#CDEB8B; 
    overflow:hidden; 
}

#container { 
    padding:20px; 
}

අලුත්ම jQuery සංස්‌කරණය jQuery.com වෙතින් ලබා ගන්නට පුලුවන්. එය ඔබේ පිටුවට අමුණූ පසු පහත පරිදි කේතය ලියන්න.

javascript

<script type="text/ecmascript">
$(document).ready(function(){
    $('#my_slide').hide();
    $('.my_button').click(function(){
        $('#my_slide').slideToggle('slow');
        return false;
    });
});
</script>

මෙහි $('#my_slide').hide(); මගින් my_slide, div එක සගවනවා. ඉතිරි පේලි වලින් කියන්නේ ලින්ක්‌ එක එබූ පසු my_slide, div එකට ස්‌ලයිඩ් වෙන ලෙසයි.

සබැදිය බලන්න

නැවත හමුවෙමු !