SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    html5 nav tags and submenus

    Is there anyway to create submenus under html5 <nav> tags? I have a very simple navigation right now, Id like to add a few additional submenus. I have done this before using <ul> and <li> tags, but I really wanted to try to do something very html5 and css3 driven. Is it possible to do this combining all three types of tags? Any advice would be appreciated.

    PS- I haven't been on this site in awhile. I know I am probably posting wrong. Also, can anyone tell me where I can find my old posts? I know someone gave me some info on the correct way to post once, but I can't locate any of my history.


    Heres the HTML:

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Developmental Writing</title>
    <link href="css/master_writing.css" rel="stylesheet" type="text/css" />
    <meta name="description" content="Austin Community College Developmental Writing Instructor Resources">
    <meta name="keywords" content="teacher, faculty, instructor, resources, teaching, teaching guides">
    <meta name="robots" content="index,follow">
    <script>
      'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)})
    </script>
    
    <!--[if IE ]>
      <link href="css/iecss.css" rel="stylesheet" type="text/css">
    <![endif]-->
    
    </head>
    
    <body>
        
    
    
    <div id="wrapper">
      <div id="content">
      
      <div id="header"></div><!--end header-->
    
    <nav>
    <a href="index.html">Home Page</a>
    <a href="eBook.html">eBook Learning</a>
    <a href="Course Options.html">Course Info</a>
    <a href="faculty.html">Meet the Faculty</a>
    <a href="instructor_resources.html">Instructor Resources</a>
    <a href="#">Lorem Ipsum</a>
    </nav>
    
    
    CSS: 
    
    nav{
    display: table;
    background-color:#dfdddd;
    width: 100%;
    table-layout: fixed;
    }
    
    nav a{
    display:table-cell;
    padding: 7px 0;
    color: #000;
    text-align:center;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -ms-transition:all .2s linear;
    -o-transition:all .2s linear;
    text-decoration:none;
    
    }
    
    nav a:hover{
    color: #FFF ;
    background-color: #007AC3;
    }
    Last edited by ralph.m; Jan 22, 2014 at 17:02. Reason: added code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by colin27 View Post
    Is it possible to do this combining all three types of tags?
    Sure. The general practice is just to wrap a <nav> element around the standard UL structure. This is certainly the best approach if you are including submenus.

    can anyone tell me where I can find my old posts?
    Lots of ways:

    • Click on your username (to the left of your post) and choose 'View forum posts'.
    • Click on My SitePoint in the main menu
    • Click on your username in the top right menu


    I am probably posting wrong.
    All fine, except that you should wrap [code] [/code] tags around your code. There is a # button for that if you don't want to type it.

  3. #3
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph.m!


Tags for this Thread

Bookmarks

Posting Permissions

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