CODEWITHSUNDEEP
jqueryhtmlcss
Rob Gray
Rob Gray

Reputation: 3266

Two level horizontal menu highlighting current page

I've made a two level menu using CSS and HTML (ul's etc). What I want is the top level to be selected (using the 'selected' class) and the item in the second level that corresponds to the current page to have the class 'active' (which is just bold).

EG when the user navigates to '/maintenance/company.aspx', I want the Maintenance menu item to be selected and the "Companies" submenu item to be bold.

The 1st level selection is working and the bold is working, however I cannot get the actual submenu (2nd level) to display.

CSS

#menu
{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    background:url(../images/menubg.gif) repeat-x;
    height:32px;
    text-transform:uppercase;
    font-family: Arial, Helvetica, sans-serif;
}
#menu li
{
    float:left;
    padding:0;
    margin:0;
}
#menu a
{
    text-decoration:none;    
    padding:10px 15px;
    display:block;
    color:#ffffff;
}
#menu li:hover a, a.selected
{
    background:#ffffff;
    color: #666666 !important;
}
#menu li span
{
    float:left;
    padding: 5px 0;
    position:absolute;
    display:none;
    left:0;
    top:31px;
    background:#ffffff;
    color: #000;
    width: 100%;
}
#menu li:hover span, .selectedSubMenu { display:block; }
#menu li span a { display: inline; padding: 5px 15px; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
#menu li span a:hover {text-decoration: underline;}
.active { font-weight: bold; }

HTML

<ul id="menu">            
    <li><a href="#" id="contracts">Contracts</a>
        <span>
            <a href="/contracts/submitcontract.aspx">New Contract</a>
            <a href="/contracts/search.aspx">Find Contract</a>
        </span>
    </li>
    <li><a href="#" id="invoicing">Invoices</a>
        <span>
            <a href="/invoicing/invoicerun.aspx">Invoices Run</a>
            <a href="/invoicing/invoicerun.aspx">Invoicing History</a>
        </span>
    </li>
    <li><a href="#" id="maintenance">Maintenance</a>
        <span>
            <a href="/maintenance/account.aspx">Accounts</a>
            <a href="/maintenance/agent/search.aspx">Agents</a>
            <a href="/maintenance/company.aspx">Companies</a>
            <a href="/maintenance/contact.aspx">Contacts</a>
            <a href="/maintenance/networks.aspx">Networks</a>
            <a href="/maintenance/plans.aspx">Plans</a>
        </span>
    </li>
    <li><a href="#" id="admin">Control Panel</a>
        <span>
            <a href="/admin/userlist.aspx">Users</a>
            <a href="/admin/systemsettings.aspx">System Settings</a>
        </span>
    </li>
</ul>

JQUERY

function markActiveLink() {
    var path = location.pathname.substring(1);

    if (path) {
        $('#menu li > a').each(function() {
            var $category = $(this).attr('id');
            if (path.indexOf($category) > -1) {
                $(this).addClass('selected');

            -->    $(this).siblings('span:first').addClass('selectedSubMenu');

                $('#menu li span a[@href="/' + path + '"]').addClass('active');                        
            }
        });              
    }
}

$(document).ready(markActiveLink);

Upvotes: 0

Views: 2272

Answers (1)

Rob Gray
Rob Gray

Reputation: 3266

I figured out what it was with some investigation with FireBug. I needed to add some specificity to my css.

#menu li:hover span, .selectedSubMenu { display:block; }

became 

#menu li:hover span, #menu li span.selectedSubMenu { display:block; }

and I had to add some css to change the colour of the anchor 

#menu li span.selectedSubMenu a { color:#666666; }

http://www.htmldog.com/guides/cssadvanced/specificity/ helped explain it to me.

Upvotes: 1

Related Questions