HTML5.1 Details Tag for a Offcanvas menu - Is my code semantically correct?

I have an idea for implementing an offcanvas menu which works without JavaScript.

This is the HTML code:

<a href="#offcanvas_menu">Menu</a>

<nav id="offcanvas_menu">
    <ul>
        <li>
            <a chref="..">Menuitem 1</a>
        </li>
        <li>
	    <details>
                <summary>Menuitem 2</summary>
                <ul>
                    <li>
                        <a class="first_menuitem" href="/manage/users/">Sub Menuitem 1</a>
                    </li>
                 </ul>
             </details>
         </li>
     </ul>
</nav>

The menu is oopen with offcanvas_menu:target { }
The Sub menu is open with the new details tag. It's work without JavaScript :)

My question is. Is this also semantically correct?

The HTML5.1 Spec says: "The details element represents a disclosure widget from which the user can obtain additional information or controls."
A navigation is a form of control.

Received on Monday, 21 November 2016 08:51:02 UTC