CODEWITHSUNDEEP
csseventshyperlinkclicklabel
Sempervivum
Sempervivum

Reputation: 948

CSS: label and link, both should work

I've created a pure CSS navigation for a one pager, demo here: http://webentwicklung.ulrichbangert.de/thread36-nav-6.html Works fine so far, but additionally I'd like to hide the menu when a link is clicked. I tried wrapping the ul in the nav by a label for the radio button that hides the menu, but no success. Obviously the link captures the click event and it doesn't reach the label.

HTML for the radio buttons:

    <!-- menu visible when checked -->
    <input type="radio" name="rbnav" id="rbnav1">

    <!-- these should hide the menu -->
    <input type="radio" name="rbnav" id="rbnav2">
    <input type="radio" name="rbnav" id="rbnav3">
    <input type="radio" name="rbnav" id="rbnav4">

HTML for the nav:

    <nav>
        <ul>
            <label for="rbnav4">
                <li>
                    <a href="#home">Home</a>
                </li>
                <li>
                    <a href="#products">Products</a>
                </li>
                <li>
                    <a href="#aboutus">About Us</a>
                </li>
            </label>
        </ul>
    </nav>

I there a pure CSS solution for this task? I read this thread: Activate Label and Link with one click @Aziz writes "I don't think there is pure CSS solution to your problem, you'd have to use some JavaScript code". Can anyone confirm that it's definitely not possible by pure CSS or on the other hand point out a solution?

Upvotes: 0

Views: 77

Answers (1)

reisdev
reisdev

Reputation: 3383

I don't know how have you structured your code, but, the better way(maybe the only) way to do this is using JavaScript. If you use CSS class to open and close the nav, you should create a function that changes the class of it.

Can you show more about your code? Are you using another JavaScript functions?

Upvotes: 2

Related Questions