SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  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


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
  •