Could someone help me with drop down menu's?

welshdragon

welshdragon

welshdragon

Soldato
Joined
28 Dec 2009
Posts
6,876
Location
Wales
I am new to HTML/CSS and I have found it easier reverse engineering template's to learn some of the basics.

However, I am stuck on how to add drop down menu's to my horizontal menu bar. Google brings up many and varied options. If someone could tell me the easiest I would be very grateful.

This is my website

The top navigation bar has its own html page. There is one css doc for the whole site. How do I approach this? I think my brain might implode!

Cheers for any help guys if you can!
 
Once I put the code in html wise, can I integrate the css into my existing css sheet to keep it all tidy? Want it to use same color scheme etc

@Pho - that looks promising. shall give that a blast!
 
I used the one Pho linked previously, but it was wrapping my text if it was long. The SuperFish menu uses SuperSubs so long menu items do not get wrapped onto multiple lines.

Otherwise it was fine. If you only have short menu item tags it's fine too.
 
Could it just be a case of creating a new ul item under one of the navigation menu headers then sticking a bit of code in the css file? This is it at the moment. I mean could I use the <ul> under say NAS reveiws to effectively create a child list? I assume then that I just need to edit my css to tell it that it's drop down menu?

<body>
<ul>
<li><a href="../index.htm">Home</a></li>
<li><a href="../about.htm">About Us</a></li>
<li><a href="../nas%20reviews.htm">NAS Reviews</a>
</li>
<li><a href="../Media%20Streamers%20Home%20Page.htm">Media Streamers</a></li>
<li><a href="../Cool%20Stuff%20Home.htm">Cool Stuff</a></li>
<li><a href="../contactus.htm">Contact Us</a></li>
<li><a href="../sitemap.htm">Site Map</a></li>
</ul>

</body>

</html>

Also, not sure why when linking items togetehr they generate the %20 in the code, unless thats inline css or something?
 
My menu in fact has its own page. So could I just build a fresh one on a new HTML and call it it the same as the previous one and the css file would pick it up and apply colors etc?
 
Hmm, for me, I redid my menu system pretty much and then just changed the styles about.

For SuperFish:

Call this from the <head></head> section:

PHP: 
    <%--JQuery UI JS--%>
    <script type="text/javascript" src="/Scripts/JQueryUI/jquery-1.7.1.js"></script>

    <%--SuperFish JS--%>
    <script src="/Scripts/SuperFish/superfish.js" type="text/javascript"></script>
    <script src="/Scripts/SuperFish/supersubs.js" type="text/javascript"></script>

    <%--SuperFish CSS--%>
    <link href="/Styles/SuperFish/superfish-navbar.css" rel="stylesheet" type="text/css" />
    <link href="/Styles/SuperFish/superfish.css" rel="stylesheet" type="text/css" />
    <link href="/Styles/SuperFish/superfish-vertical.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript">

            $(function () {

                // SuperFish Menu
                $("ul.sf-menu").supersubs({
                    minWidth: 13,   // minimum width of sub-menus in em units 
                    maxWidth: 20,   // maximum width of sub-menus in em units 
                    extraWidth: 1     // extra width can ensure lines don't sometimes turn over 
                    // due to slight rounding differences and font-family 
                }).superfish({
                    speed: 1,
                    disableHI: true,
                    dropShadows: false,
                    delay: 100
                    });  // call supersubs first, then superfish, so that subs are 
                // not display:none when measuring. Call before initialising 
                // containing tabs for same reason.

            });

	    </script>

for the menu itself, this works for me:

PHP: 
		<ul class="sf-menu">
            <%--1st Menu Button--%>
			<li class="currentdivider">
                <%--Hardware Menu--%>
				<a href="#">Hardware</a>
				<ul>
					<li class="current">
                        <%--Disks Submenu--%>
						<a href="#">Disks</a>
						<ul>
					        <li class="current">
                                <%--2010 Disks--%>
						        <a href="#">Exchange 2010</a>
						        <ul>
							        <li><a href="/Disks/MountPoints.aspx">Mount Points</a></li>
						        </ul>
                                <%--2007 Disks--%>
                                <li><a href="/Disks/Disks.aspx">Exchange 2007</a></li>
                                <%--2003 Disks--%>
                                <li><a href="/Disks/2003_Disks.aspx">Exchange 2003</a></li>
					        </li>
						</ul>
					</li>
                    <%--Server List--%>
                    <li><a href="/Servers/ServerList.aspx">Server List</a></li>
				</ul>
			</li>
        <%--End Menu Structure--%>
		</ul>
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom