www.webdeveloper.com
Results 1 to 4 of 4

Thread: HTML 5 & CSS drop down menu

  1. #1
    Join Date
    Apr 2014
    Posts
    36

    HTML 5 & CSS drop down menu

    HI guys hope your all well. I'm in the final stages of getting my website created.

    I wanted a simple HTML/CSS dropdown menu I have found this, from this website http://line25.com/tutorials/how-to-c...-dropdown-menu

    I have followed it to the letter

    This is my code so far (HTML code)

    Code:
    <html>
    	<head>
        	<title>Nav</title>
           </head>
    	 <body>
         	<nav>
    	<ul>
    		<li><a href="index.php">Home</a></li>
    		<li><a href="historyofweb.php">History of the Website </a></li>
           
           	<li><a href="research_into_dis.php">Information About Dysaculia</a>
    			<ul>
    				<li><a href="what_is_dyscaculia.php">What is Dyscaculia?</a>
                    <li><a href="causes_of_dyscaculia.php">Underlying causes of Dyscaculia</a>
                    <li><a href="dyscaculia_neglected.php">Why has Dyscaculia been neglected?</a>
                    <li><a href="other_names_for_dyscaculia.php">By what names are Dyscaculia are reconfigured by the public?</a>
                    <li><a href="warning_signs.php">What are the warning signs of Dyscaculia?</a>
                    <li><a href="identifying_dis.php">Identifying Dyscaculia</a>
                    <li><a href="gove_definition.php">How does the UK Government and DfES class Dyscaculia as?</a>
    			</ul>
    		</li>
           <li><a href="questionniare_analysis.php">Results of Questionniares that were given out to help develope this website</a>
    			<ul>
    				<li><a href="onlinetests.php">Do Online Tests Help you</a></li>
    				<li><a href="maths_topic.php">Maths Topic</a></li>
    				<li><a href="How_ would_ you_ like_ to_ access_ a_ new_ piece _of_ Mathematical _software.php">How would you like to access a new Peice of new software?</a>
                    <li><a href="interact_with_software.php">Do you think its important to interact with a peice of software/a>
                    <li><a href="useful_of_new_software.php">Would you find it useful with the devekioment of a new peice of maths software?</a>
                    <li><a href="use_of_other_software.php">Have you ever had the use of any Mathematical software</a>
                    <li><a href="when_learnning.php">When Learning how do you prefer to learn?</a>
                    <li><a href="bbcbitesize.php">What Features of the BBC Bitesize website do you find useful?</a>
                    </li>
    			</ul>
    		</li>
    		<li><a href="fractions_intro.php">Fractions Introduction</a>
    			<ul>
    				<li><a href="fractions_adding.php">Fractions:Adding</a></li>
    				<li><a href="fractions_subtracting.php">Fractions:Subtracting</a></li>
                    <li><a href="fractions_multiplication.php">Fractions:Multiplication</a></li>
                    <li><a href="division_fractions.php">Fractions:Fractions</a></li>
    			</ul>
    		</li>
            </li>
    		<li><a href="start.php">End of Module Quiz</a></li>
    	</ul>
            <li><a href="profile.php">Personal Profile</a>
    			<ul>
    				<li><a href="changepassword.php">Change Password</a></li>
                    <li><a href="update.php">Update Details</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Logout</a></li>
    			</ul>
    				</nav>
    	</body>
       </html>
    This is the CSS code that I'm trying to put into my website CSS code

    Code:
    av ul ul {
    	background: #5f6975; border-radius: 0px; padding: 0;
    	position: absolute; top: 100%;
    }
    	nav ul ul li {
    		float: none; 
    		border-top: 1px solid #6b727c;
    		border-bottom: 1px solid #575f6a;
    		position: relative;
    	}
    		nav ul ul li a {
    			padding: 15px 40px;
    			color: #fff;
    		}	
    			nav ul ul li a:hover {
    				background: #4b545f;
    			}
    			nav ul ul ul {
    	position: absolute; left: 100%; top:0;
    }
    When I run my index page (this is to make sure its working) all I'm getting is a bulleted list and now how it should look like!

    Sorry to be such a pain can anyone give me a hint as to where I'm going wrong

    Any help would be much appreicated

    Rich

  2. #2
    Join Date
    Jul 2014
    Posts
    9
    ===>av ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;

    Shouldn't that read nav instead of av?

  3. #3
    Join Date
    Jul 2014
    Posts
    9

    The CSS for the final Demo

    I firebugged it and it is:

    Code:
    body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
        border: 0 none;
        margin: 0;
        padding: 0;
    }
    body {
        background: url("bg.png") repeat scroll 0 0 #909eab;
        font-family: Helvetica,sans-serif;
        font-size: 18px;
        line-height: 24px;
    }
    nav {
        margin: 100px auto;
        text-align: center;
    }
    nav ul ul {
        display: none;
    }
    nav ul li:hover > ul {
        display: block;
    }
    nav ul {
        background: -moz-linear-gradient(center top , #efefef 0%, #bbbbbb 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        border-radius: 10px;
        box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
        display: inline-table;
        list-style: none outside none;
        padding: 0 20px;
        position: relative;
    }
    nav ul:after {
        clear: both;
        content: "";
        display: block;
    }
    nav ul li {
        float: left;
    }
    nav ul li:hover {
        background: -moz-linear-gradient(center top , #4f5964 0%, #5f6975 40%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    }
    nav ul li:hover a {
        color: #fff;
    }
    nav ul li a {
        color: #757575;
        display: block;
        padding: 25px 40px;
        text-decoration: none;
    }
    nav ul ul {
        background: none repeat scroll 0 0 #5f6975;
        border-radius: 0;
        padding: 0;
        position: absolute;
        top: 100%;
    }
    nav ul ul li {
        border-bottom: 1px solid #575f6a;
        border-top: 1px solid #6b727c;
        float: none;
        position: relative;
    }
    nav ul ul li a {
        color: #fff;
        padding: 15px 40px;
    }
    nav ul ul li a:hover {
        background: none repeat scroll 0 0 #4b545f;
    }
    nav ul ul ul {
        left: 100%;
        position: absolute;
        top: 0;
    }

  4. #4
    Join Date
    May 2014
    Posts
    900
    You should be made aware of a few issues -- the biggest of which is that using display:none can risk things like screen readers not actually reading out the menu items; that's a big accessibility /FAIL/ right there and why many people use left:-999em; to slide it off the screen instead of using display, while I prefer to use overflow:hidden; on it's parent.

    Second, unless you're writing HTML 3.2, you REALLY should be closing all block level elements explicitly -- so you're missing a few </li> in there... and you forgot to close a few other tags like one of your anchors (Actually, you forgot the opening < so it's just /a> -- which won't work!) while closing an extra LI that doesn't even exist. You also seem to open a UL where you can't open a UL... between LI...

    Third, some of those values are just too blasted big to belong in a menu in the first place, and really with a menu that large you're running the risk of "link overload" -- you may be better off from a usability and accessibility standpoint by using conventional drilldown navigation instead of trying to stuff values into a menu people might not even visit -- and that in fact could drive users away from the site. I mean, you've got close to 2.5k of just menu... :/ Some of those anchors have text in them so blasted big I'm not sure how you expect a dropdown menu to even be navigable, particularly when at some display sizes single elements could go to multiple lines!

    I would also suggest you pick -- tabs or spaces, not both... you can see why from what the CODE tags on this forum did to it. Likewise I'd suggest you use a few more tabs and carriage returns in there, as formatting can prevent you from doing something silly like say... forgetting to close your LI.

    Fourth, your post doesn't have a doctype -- that can trigger oddball behaviors in far more than just IE.

    Fifth, you can't entirely rely on the adjacent sibling selector ">" if you still care about anything prior to IE9. If you used overflow instead of display, you also wouldn't need it.

    Sixth, border:0 none; is pretty silly, they mean the same thing... and targeting things like INPUT with a reset can wreak havoc cross-browser. I recognize it as a poor reset I've seen a few places -- it's one of the ones that seems good, but really misses a few basic things. Here, try mine:

    Code:
    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,dd,dt,dl,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img,fieldset {
    	border:none;
    }
    A wee bit more reliable and doesn't screw you up on form elements.

    I'd probably also suggest axing the stupid pointless redundant HTML 5 'nav' tag since its an extra DOM element for no good reason... but that's your call not mine. Still, I'd get a class or ID in there since you may have more than one NAV block on the page, since NAV just means "this section isn't content, so screen readers and the like can skip past it". It does NOT mean that it's even a menu, just that it's navigational or other non-"content" elements. Sad thing is, many HTML 5 "experts" out there don't even seem to grasp that even though it's right there in the spec!

    With those massive content texts I'm not even sure how you expect it to be usable, but if you insist on going this route a good start would be fixing your broken markup into something like:

    Code:
    <!DOCTYPE html>
    <html lang="en"><head>
    <meta charset="UTF-8"><head>
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    	
    <title>
    	Dropdown Menu Demo
    </title>
    
    </head><body>
    
    <nav>
    	<ul>
    		<li>
    			<a href="index.php">
    				Home
    			</a>
    		</li><li>
    			<a href="historyofweb.php">
    				History of the Website
    			</a>
    		</li><li>
    			<a href="research_into_dis.php">
    				Information About Dysaculia
    			</a>
    			<ul>
    				<li>
    					<a href="what_is_dyscaculia.php">
    						What is Dyscaculia?
    					</a>
    				</li><li>
    					<a href="causes_of_dyscaculia.php">
    						Underlying causes of Dyscaculia
    					</a>
    				</li><li>
    					<a href="dyscaculia_neglected.php">
    						Why has Dyscaculia been neglected?
    					</a>
    				</li><li>
    					<a href="other_names_for_dyscaculia.php">
    						By what names are Dyscaculia are reconfigured by the public?
    					</a>
    				</li><li>
    					<a href="warning_signs.php">
    						What are the warning signs of Dyscaculia?
    					</a>
    				</li><li>
    					<a href="identifying_dis.php">
    						Identifying Dyscaculia
    					</a>
    				</li><li>
    					<a href="gove_definition.php">
    						How does the UK Government and DfES class Dyscaculia as?
    					</a>
    				</li>
    			</ul>
    		</li><li>
    			<a href="questionniare_analysis.php">
    				Results of Questionniares that were given out to help develope this website
    			</a>
    			<ul>
    				<li>
    					<a href="onlinetests.php">
    						Do Online Tests Help you
    					</a>
    				</li><li>
    					<a href="maths_topic.php">
    						Maths Topic
    					</a>
    				</li><li>
    					<a href="How_ would_ you_ like_ to_ access_ a_ new_ piece _of_ Mathematical _software.php">
    						How would you like to access a new Peice of new software?
    					</a>
    				</li><li>
    					<a href="interact_with_software.php">
    						Do you think its important to interact with a peice of software
    					</a>
    				</li><li>
    					<a href="useful_of_new_software.php">
    						Would you find it useful with the devekioment of a new peice of maths software?
    					</a>
    				</li><li>
    					<a href="use_of_other_software.php">
    						Have you ever had the use of any Mathematical software
    					</a>
    				</li><li>
    					<a href="when_learnning.php">
    						When Learning how do you prefer to learn?
    					</a>
    				</li><li>
    					<a href="bbcbitesize.php">
    						What Features of the BBC Bitesize website do you find useful?
    					</a>
    				</li>
    			</ul>
    		</li><li>
    			<a href="fractions_intro.php">
    				Fractions Introduction
    			</a>
    			<ul>
    				<li>
    					<a href="fractions_adding.php">
    						Fractions:Adding
    					</a>
    				</li><li>
    					<a href="fractions_subtracting.php">
    						Fractions:Subtracting
    					</a>
    				</li><li>
    					<a href="fractions_multiplication.php">
    						Fractions:Multiplication
    					</a>
    				</li><li>
    					<a href="division_fractions.php">
    						Fractions:Fractions
    					</a>
    				</li>
    			</ul>
    		</li><li>
    			<a href="start.php">
    				End of Module Quiz
    			</a>
    		</li><li>
    			<a href="profile.php">
    				Personal Profile
    			</a>
    			<ul>
    				<li>
    					<a href="changepassword.php">
    						Change Password
    					</a>
    				</li><li>
    					<a href="update.php">
    						Update Details
    					</a>
    				</li>
    			</ul>
    		</li><li>
    			<a href="#">Logout</a>
    		</li>
    	</ul>
    </nav>
    	
    </body></html>
    I'm out the door for my nightly ride shortly, but when I get back I'll toss together some CSS to show how I'd approach the dropdowns using overflow instead of display.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles