Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Junk: Junk: Drop down Menu
#1
Ok, I'm noob at HTML. I would like anyone to make me a code of a drop down menu. It's for MyBB. What should be the code? Please help.
#2
I will give you a tut on how I developed a drop-down menu for my site: GamingMB.x10.mx (Over 1,000 members, and I'm not advertising, btw), click the "Site Links" to see the drop down menu.

Step 1: add this to you header template or something along these lines

Code:
<ul id="menu">
    <li><a href="#">Parent 01</a></li>
    <li><a href="#" class="selected">Parent 02 > </a>
        <ul>
            <li><a href="#">Item 01</a></li>
            <li><a href="#" class="selected">Item 02</a></li>
            <li><a href="#">Item 03</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 03 > </a>
    <ul>
        <li><a href="#">Item 04</a></li>
        <li><a href="#">Item 05</a></li>
        <li><a href="#">Item 06</a></li>
        <li><a href="#">Item 07</a></li>
    </ul>            
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 04</a></li>
</ul> 
Replace Parent with the menu item name and url and Item with the submenu name and link.

Once this is done you will need to edit your global.css (we will presume you know how to do this.)

Step 2: Add this to the bottom of your global CSS
Code:
/* remove the list style */
#menu {
    margin:0;
    padding:0;
    list-style:none;
}    

#menu li {
    float:left;
    display:block;
    width:100px;
    background:#ccc;
    position:relative;
    z-index:500;
    margin:0 1px;
}

/* this is the parent menu */
#menu li a {
    display:block;
    padding:8px 5px 0 5px;
    font-weight:700;  
    height:23px;
    text-decoration:none;
    color:#fff;
    text-align:center;
    color:#333;
}

#menu li a:hover {
    color:#fff;
}

/* submenu, it's hidden by default */
#menu ul {
    position:absolute;
    left:0;
    display:none;
    margin:0 0 0 -1px;
    padding:0;
    list-style:none;
}

#menu ul li {
    width:100px;
    float:left;
    border-top:1px solid #fff;
}


#menu ul a {
    display:block;  
    height:15px;
    padding: 8px 5px;
    color:#666;
}

#menu ul a:hover {
    text-decoration:underline;    
}

*html #menu ul {
    margin:0 0 0 -2px;
}
Ofcouse you can change the style to customize it. once the css and template edits are done you will need to do one more thing.

Step 3: Add the javascript file and jquery to your headerinclude.

Open you header include template and add these lines
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/dropdownmenu.js"></script>
<script>
    jQuery.noConflict();
</script> 
Make sure to download the file and put it in /jscripts

When done successfully it should work the same way as the menu at the top of this webpage the style is different though.
#3
Thanks a lot mate.
#4
No problem.
#5
Very nice work
#6
This thread has been junked!
#7
This thread has been junked for a reason, leave it!


Forum Jump:


Users browsing this thread: 1 Guest(s)