Jump to content


Photo

CSS Active Dropdown


Best Answer Psycho, 08 March 2017 - 09:50 PM

OK, I gave you a lot of information, so let's take it one step at a time.

 

1. Your main problem was that the function Active() was either applying the 'dropdown' class OR the 'active' class. The dropdown class is the one that applied the styles which create the dropdown affect. So, if you only apply the 'Active' class you lose the dropdown affect. You can apply multiple classes to the same element by separating them with spaces. So, you want to always apply the 'dropdown' class to all of the relevant element and add the 'active' class only to the one where it applies.

 

2. Even if you were to properly apply the classes per #1 (Inactive class="dropdown" or Active class="dropdown active"), the definition for the 'active' class would do nothing because it is applied to the <li> element. The background colors you are seeing are due to styles applied to the anchor tags (<a></a>) not the <li> tags. That can be easily fixed, by changing the definition for active in the stylesheet to:

li.active a {
    background-color: #990000;  

}

What that means is for any <li> elements with the 'active' class, find any anchors (<a></a>) and apply the formatting.

 

Those two things alone will directly fix your problem. But, your HTML follows a predictable format. Rather than copy/paste code and change labels, hrefs, etc. - create the content with a function. That way you know you won't have any copy/paste errors. This is especially helpful when you need to make changes to the format. So, I suggest creating an array that defines the menu (the parent links and the child links), then creating a function to produce the HTML output. This way you can easily add/edit/modify the menu links by just changing the array - which you can use as an include file. You would not have to modify core code to change the menu. Or, if you want to change the menu structure you just need to change the function. So, I provided an array for the current menu items you had as well as a function to create the menu - as well as fix the above issues.

 

Here is a working script with all the pieces

<?php
 
//hardcoded $webpage value for testing purposes
$webpage = "drivers.php";
 
//definition of available menu
$menuLinks = array(
    'Home' => array(
        'href' => 'menu.php'
    ),
    'Territory Manager' => array(
        'href' => 'tms.php',
        'children' => array (
            'Add TM' => '#',
            'Search TM' => 'search.php?search=TM'
        ),
    ),
    'Sales' => array(
        'href' => 'sales.php',
        'children' => array (
            'Add Sales Person' => '#',
            'Search Sales' => 'search.php?search=sales'
        ),
    ),
    'Drivers' => array(
        'href' => 'drivers.php',
        'children' => array (
            'Add Driver' => '#',
            'Search Drivers' => 'drivers.php'
        ),
    ),
    'Passengers' => array(
        'href' => 'passengers.php',
        'children' => array (
            'Add Passenger' => '#',
            'Search Passengers' => 'search.php?search=passengers'
        )
    )
);
 
//Function to create html content for menu
function createMenu($menuLinks, $webpage=false)
{
    $menuLinksHtml = '';
    foreach($menuLinks as $parentLabel => $parentLink)
    {
        //Determine link if parent is active or not
        $active = ($webpage == $parentLink['href']) ? ' active' : '';
        $menuLinksHtml .= "<li class=\"dropdown{$active}\">\n";
        //Determine if parent link has children
        if(!isset($parentLink['children']))
        {
            //No child elements
            $menuLinksHtml .= "<a href='{$parentLink['href']}'>{$parentLabel}</a>\n";
        }
        else
        {
            //Has child elements
            $menuLinksHtml .= "<a href=\"javascript:void(0)\" class=\"dropbtn\">{$parentLabel}</a>";
            $menuLinksHtml .= "<div class=\"dropdown-content\">\n";
            foreach($parentLink['children'] as $childLabel => $childLink)
            {
                $menuLinksHtml .= "<a href=\"{$childLink}\">{$childLabel}</a>\n";
            }
            $menuLinksHtml .= "</div>\n";
            
        }
        $menuLinksHtml .= "</li>\n";
    }
    //Return HTML content
    return $menuLinksHtml;
}
 
 
?>
<html>
<head>
<style>
/***** Begin Menu CSS *****/
ul {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
 
li {
    float: left;
}
 
li a, .dropbtn{
    display: inline-block;
    font-size: 15px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-right: 1px solid #bbb;
}
/* Color of the main menu text when hovering */
li a:hover { 
    background-color: red;
}
/* Once the mouse has moved off the main menu button and is now highlighting a sub menu button, this defines what that main menu button color is */
.dropdown:hover{
    background-color: red;
}
/* Color of main menu button when not selected */
.dropbtn {
    background-color: 333;
}
li .dropdown {
    position:relative;
    display: inline-block;
    
}
li:last-child {
    border-right: none;
}
.dropdown-content{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 5px 7px 5px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    background-color: #f6f6f6; /* Sets background color of the drop down menu (not selected) */
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ccc}
 
.dropdown:hover .dropdown-content{
    display: block;
}
/* I have no idea what this does as it appears nothing...
li a:hover:not(.active) {
    background-color: #blue;
} */
li.active a {
    background-color: #990000;  
}
.active dropdown-content{
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 5px 7px 5px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.active dropdown-content a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
/***** End Menu CSS *****/
</style>
</head>
 
<body>
 
<ul>
<?php echo createMenu($menuLinks, $webpage); ?>
</ul>
 
</body>
</html>

EDIT: Removed the Active() function that is not used in my code.

Go to the full post


  • Please log in to reply
21 replies to this topic

#21 TapeGun007

TapeGun007
  • Members
  • PipPipPip
  • Advanced Member
  • 283 posts
  • LocationSan Diego, CA

Posted 11 March 2017 - 12:13 AM

Ah.  Dadgum it, I really worked hard trying to figure out the error on my own.  Now I understand.  I had thought about that, but what I also misunderstood is that the last CSS code always overwrites the first CSS code... which apparently is NOT true.

 

But yes, that fixed it, and I'm very grateful for all your help!!!!  I feel like you really went the extra mile on this.. and it's very much appreciated.


Edited by TapeGun007, 11 March 2017 - 12:14 AM.


#22 Psycho

Psycho
  • Moderators
  • Advanced Member
  • 11,817 posts
  • LocationCanada

Posted 13 March 2017 - 02:55 PM

I had thought about that, but what I also misunderstood is that the last CSS code always overwrites the first CSS code... which apparently is NOT true.

 

No, that is true. But the first definition was for a larger group, whereas the second definition was for a smaller group. As an analogy, you might say all dogs will have a blue collar and then all Labradors will have a red collar. Any dog that is not a Labrador will have a blue collar. The second definition (which is more specific) has no impact on the non-Labrador dogs.


The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users