troubleshooting Question

How to get CSS styled menu to maintain the open selected menu?

Avatar of lgduong
lgduongFlag for United States of America asked on
CSSJavaScript
13 Comments1 Solution197 ViewsLast Modified:
Hello experts,

I have a CSS accordion menu that I would like to have the selected menu item continued to be open after a link is clicked.
For example, to get to the "chicken.php" page, the menu is expanded to the Food Management menu item.  If I want to click to the "beef.php" menu, it will maintain the expanded menu from the previous "chicken" page.

Here is my CSS menu:

            <div id="menu">
                  <ul class="cm-accordion-menu">
                                    <li class="main"><a href="/myhome.php">Home</a>
                        </li>
                        <li class="submenu">
                              <input type="checkbox" name ="group-aboutus" id="group-aboutus">
                              <label for="group-aboutus">About Us</label>
                              <ul>
                                    <li><a href="aboutFDP.php">About FDP</a></li>
                              </ul>
                        </li>

                        <!-- METRICS -->
                        <li class="submenu">
                              <input type="checkbox" name ="group-metrics" id="group-metrics">
                              <label for="group-metrics">Metrics</label>
                                    <ul>
                                          <li><a href="metric_home.php">Metrics Homepage</a></li>

                                          <!-- ACCESS MANAGEMENT -->
                                          <li class="submenu">
                                                <input type="checkbox" name ="subgroup-access" id="subgroup-access">
                                                <label for="subgroup-access">Access Management</label>

                                                <ul>
                                                      <li><a href="access.php">Access Status</a></li>
                                                      <li><a hre="access_report.php">Access Report</a></li>
                                                </ul>
                                          </li>  

                                          <!-- FOOD MANAGEMENT -->                                                
                                          <li class="submenu">
                                                <input type="checkbox" name ="subgroup-asset" id="subgroup-asset">
                                                <label for="subgroup-asset">Food Management</label>

                                                <ul>
                                                      <li><a href="dairy.php">Dairy</a></li>
                                                      <li><a href="beverages.php">Beverages</a></li>
                                                      <li><a href="produces.ph">Produces</a></li>
                                                      <li class="submenu">
                                                            <input type="checkbox" name ="subgroup-meatFood" id="subgroup-meatFood">
                                                                  <label for="subgroup-meatFood">Meat</label>
                                                                  <ul>
                                                                        <li><a href="chicken.php">Chicken</a></li>
                                                                        <li><a href="pork.php">Pork</a></li>
                                                                        <li><a href="beef.php">Beef</a></li>
                                                                        <li><a href="seafood.php">Seafood</a></li>
                                                            </ul>
                                                      </li>
                                                </ul>
                                          </li>
                              </ul>
                        </li>
                  </ul>
            </div>
styles.css
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 13 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 13 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros