Awesome! টিউনস
সকল Awesome! টিউনস

ওয়েবসাইট ডিজাইনার ও ডেভেলপারদের জন্য চমৎকার ও আকর্ষণীয় একটি CSS/jQuery Drop Menu {না দেখলে চরম মিস}

2,600 দেখা 7 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডেভেলপমেন্ট
প্রকাশিত
Level 0

6 টিউনস 19 টিউমেন্টস 0 ফলোয়ার

আসসালামু আলাইকুম।
সবাই কেমন আছেন?
আশা করি ভালই আছেন।
আমিও আলহামদুলিল্লাহ্‌ ভালো আছি।

আপনার ওয়েবসাইটকে সুন্দর ও আকর্ষণীয় করার জন্য আজ আপনাদের জন্য নিয়ে এলাম একটি দারুন একটি ড্রপমেনু ।

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Drop Down Menu</title>

<!-- CSS For The Menu -->
<link rel="stylesheet" href="css.css" />

</head>
<body>

<!-- Menu Start -->
<div id="jQ-menu">

<!-- Main Unordered List -->
<ul>
<!-- Regular List Item -->
<li><a href="#">Lorem Ipsum</a></li>

<!-- List Item With A Sub-Menu - Note The toggle And sub-menu Class -->
<li><span>Dolor</span>
<ul>
<!-- A Sub-Menu In A Sub-Menu - Any Number of Nested Menus Will Work -->
<li><span>Sit Amet</span>
<ul>
<li><a href="#">Senectus</a></li>
<li><a href="#">Aliquam</a></li>
<li><a href="#">Vivamus</a></li>
<li><a href="#">Magna</a></li>
<li><a href="#">Donec</a></li>
</ul>
</li>
<li><a href="#">Massa</a></li>
<li><a href="#">Libero</a></li>
</ul>
</li>
<li><span>Eleifend</span>
<ul>
<li><a href="#">Pretium</a></li>
<li><a href="#">Ornare</a></li>
<li><a href="#">Est</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Habitant</a></li>
</ul>
</li>
<li><span>Morbi</span>
<ul>
<li><span>Tristique</span>
<ul>
<li><span>Netus</span>
<ul>
<li><a href="#">Fames</a></li>
</ul>
</li>
<li><span>Feugiat</span>
<ul>
<li><a href="#">Vtae</a></li>
<li><a href="#">Ultricies</a></li>
</ul>
</li>
<li><span>Tincidunt</span>
<ul>
<li><a href="#">Tempor</a></li>
<li><a href="#">Lacus</a></li>
</ul>
</li>
<li><span>Enim</span>
<ul>
<li><a href="#">Ante</a></li>
<li><a href="#">Mauris</a></li>
</ul>
</li>
<li><span>Cras</span>
<ul>
<li><a href="#">Mi</a></li>
<li><a href="#">Felis</a></li>
<li><a href="#">Curabitur</a></li>
<li><a href="#">Ultricies</a></li>
</ul>
</li>
</ul>
</li>
<li><span>Tortor</span>
<ul>
<li><a href="#">Quam</a></li>
<li><a href="#">Praesent</a></li>
<li><a href="#">Dapibus</a></li>
<li><a href="#">Neque</a></li>
<li><a href="#">Egestas</a></li>
<li><a href="#">Nulla</a></li>
</ul>
</li>
<li><a href="#">Fermentum</a></li>
</ul>
</li>
<li><span>Elementum</span>
<ul>
<li><span>Vulputate</span>
<ul>
<li><a href="#">Nunc</a></li>
<li><a href="#">Consequat</a></li>
</ul>
</li>
<li><a href="#">Diam</a></li>
</ul>
</li>
<li><span>Dui</span>
<ul>
<li><a href="#">Placerate</a></li>
<li><a href="#">Sem</a></li>
<li><a href="#">Auctor</a></li>
</ul>
</li>
</ul>
<!-- End Unordered List -->

</div>
<!-- End Menu -->

<!-- Add jQuery From the Google AJAX Libraries -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<!-- jQuery Color Plugin -->
<script type="text/javascript" src="jquery.color.js"></script>

<!-- Import The jQuery Script -->
<script type="text/javascript" src="jMenu.js"></script>

</body>
</html>

CSS Code

body {
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
font-size: 14px;
}

#jQ-menu ul {
list-style-type: none;
}

#jQ-menu a, #jQ-menu li {
color: gray;
text-decoration: none;
padding-bottom: 3px;
}

#jQ-menu ul {
padding-left: 15px;
}

jQurey code 1

$(function() {
// hide all the sub-menus
$("span.toggle").next().hide();

// add a link nudging animation effect to each link
$("#jQ-menu a, #jQ-menu span.toggle").hover(function() {
$(this).stop().animate( {
fontSize:"17px",
paddingLeft:"10px",
color:"black"
}, 300);
}, function() {
$(this).stop().animate( {
fontSize:"14px",
paddingLeft:"0",
color:"#808080"
}, 300);
});

// set the cursor of the toggling span elements
$("span.toggle").css("cursor", "pointer");

// prepend a plus sign to signify that the sub-menus aren't expanded
$("span.toggle").prepend("+ ");

// add a click function that toggles the sub-menu when the corresponding
// span element is clicked
$("span.toggle").click(function() {
$(this).next().toggle(1000);

// switch the plus to a minus sign or vice-versa
var v = $(this).html().substring( 0, 1 );
if ( v == "+" )
$(this).html( "-" + $(this).html().substring( 1 ) );
else if ( v == "-" )
$(this).html( "+" + $(this).html().substring( 1 ) );
});
});

jQurey color code

// add a link nudging animation effect to each link
$("#jQ-menu a, #jQ-menu span.toggle").hover(function() {
$(this).stop().animate( {
fontSize:"17px",
paddingLeft:"10px",
color:"black"
}, 300);
}, function() {
$(this).stop().animate( {
fontSize:"14px",
paddingLeft:"0",
color:"#808080"
}, 300);
});

ডেমো দেখতে চাইলে বা ডাউনলোড করুন এখান থেকে

ধন্যবাদ সবাইকে

Level 0

আমি Md. Rahat। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 6 টি টিউন ও 19 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি সাধারণ মানুষ। মানুষের উপকার করতে পছন্দ করি। ইচ্ছা আল্লাহর প্রিয় বান্দা হওয়া ।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

ভাইয়া কিভাবে অ্যাড করব এক্তু বিস্তারিত বললে ভাল হত

    Level 0

    @mhafuz518: css এবং jQuery কোডগুলো Head Tag এর ভিতরে বসাবেন।এবং HTML কোডগুলো Body তে বসাবেন। ধন্যবাদ 🙂

Level 0

@Sumon: Brother, I’m try but failed. Plz help me. I put both css & jQuery code into the HEAD & Others html code put into BODY. But didn’t show me. Plz give me instruction.

Level 0

I’m too failed!! If you interest then please upload source file!!!

Level 0

There are some mistakes in the codes. Pls correct them soon and be careful for the next tune. Thank U.

Level 0

to mahfuz518 . vai age html shikun. ojotha prosno korien na.

Level 0

এখান থেকে সবাই ডাউনলোড করে নিন http://www.ziddu.com/download/21955518/NewFolder.zip.html