Results 1 to 3 of 3

Thread: Drop Down Tabs Navigation not html5 conform

  1. #1
    Join Date
    Jun 2012
    Location
    Vancouver/BC, Canada
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Drop Down Tabs Navigation not html5 conform

    1) Script Title: Drop Down Tabs (5 styles)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...roptabmenu.htm

    3) Describe problem:
    I use the above menu in my site: http://www.hagen-pflueger.com

    The W3C validations service gives me several errors related to this script:
    Bad value dropmenu1_c for attribute rel on element a: Keyword dropmenu1_c is not registered.

    What do I need to do, to become html5 conform?

    Thanks
    Hagen

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Looks like HTML5 is tightening the rules on a lot of formerly acceptable syntaxes. The first one is the JavaScript inline comments, in this case, the DD script credit notice. Replace what you have in between the <script> tag with the below instead:

    Code:
    // Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    // This notice MUST stay intact for legal use
    // Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    With regards to the "rel" attribute errors, it looks like HTML5 by default only accepts specific values for this attribute. You can substitute the "rel" attribute with the "data-" attribute instead, and make the necessary changes in the script to scan for those instead. To do this, first change all of the "rel" attributes inside your top level menu items to "data-rel" instead:

    Code:
    <div id="colortab" class="ddcolortabs">
    <ul>
    <li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
    <li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
    <li><a href="http://www.dynamicdrive.com/style/" title="CSS" data-rel="dropmenu1_a"><span>CSS</span></a></li>
    <li><a href="http://www.dynamicdrive.com/resources/" title="Partners" data-rel="dropmenu2_a"><span>Partners</span></a></li>	
    <li><a href="http://tools.dynamicdrive.com" title="Useful Tools"><span>Tools</span></a></li>	
    </ul>
    </div>
    Then use the attached modified .js file to boot.
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    post@Hagen-Pflueger.com (06-28-2012)

  4. #3
    Join Date
    Jun 2012
    Location
    Vancouver/BC, Canada
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Your solution works!

    Thank you very much! I appreciate that.

    Best Regards
    Hagen

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
  •