এলিন লিখেছেন:ধন্যবাদ আপনার লেখাটির জন্য। www.co.cc শুধুমাত্র ১ বছর ফ্রী দেয়। পড়ে টাকা দিয়ে রিনিউ করতে হবে। আপনি কি আমাকে জুমলাতে ড্রপডাউন মেনু তৈরি করা দেখাতে পারেন। আমার খুবই দরকার। অপেক্ষায় রইলাম।
আমি যেসব টেমপ্লেট ডেভেলপ করি তাতে ড্রপডাউনের জন্য নিচের কোড ব্যাবহার করি।
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
এটা </head> এর আগের লাইনে লিখুন।
<div class="navcontainer">
<div id="nav">
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
</div>
এটা যেখানে মেনু বসাতে চান সেখানে লিখুন।
তারপর যেকোন একটা সিএসএস ফাইলে নিচের কোড লিখুন।
.navcontainer {
padding: 0 2px;
}
#nav .moduletable h3 {
display: none;
}
#nav .moduletable {
margin: 0;
padding: 0;
}
#nav { /* all lists */
width: 100%;
margin: 0;
padding: 0;
height: 29px;
background: #D4DDE2 url("../images/nav-bg.png") repeat-x;
border: 1px solid #DBE2E8;
float: right;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 10px;
text-align: left;
float: left;
}
#nav li { /* all list items */
float: left;
margin: 0;
padding: 0;
border: none;
background: url("../images/hd.png") no-repeat top right;
height: 29px;
line-height: 29px;
}
#nav a {
font: normal 93% arial,helvetica,clean,sans-serif;
padding: 0 8px;
text-decoration: none;
margin: 0;
display: block;
height: 29px;
line-height: 29px;
color: #16387C;
background: none;
}
#nav a:hover{
text-decoration: underline;
}
#nav li.active a {
text-decoration: none;
font-weight: bold;
color: #000;
}
#nav li ul { /* second-level lists */
position: absolute;
width: 200px;
left: -999em;
z-index: 99;
margin: 0 -10px;
}
#nav li ul a, #nav li ul a:link, #nav li ul a:visited{
width: 200px;
font:normal 12px Helvetica,Arial,sans-serif;
line-height: 30px;
background-image: none;
background-color: #EEEEEE;
border: 1px solid #ccc;
color: #666;
text-transform: none;
}
#nav li ul a:hover{
color: #666;
background-color: #fff;
background-image: none;
}
#nav li ul.active a{
background-image: none;
background-color: #fff;
color: #666;
}
#nav li ul .active a:hover{
color: #666;
background-color: #fff;
background-image: none;
}
#nav li ul ul { /* third-and-above-level lists */
margin: -37px 0 0 220px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul, #nav li:hover ul ul ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul, #nav li.sfhover ul ul ul ul ul, #nav li.sfhover ul ul ul ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li li li li li:hover ul, #nav li li li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul, #nav li li li li li.sfhover ul, #nav li li li li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
কাজ হয়ে যাবার কথা।
আমার সাইটে গেলে লাইভ উদাহরন দেখতে পাবেন।