Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Thanked 0 Times in 0 Posts

    An onclick css event for navigation

    Hi everyone,
    I'm trying to have my website navigation highlight the link the user clicks so they know the website is responding. Unfortunately my store has a lot of products and it suffers in the speed department. So my boss wants this little feedback just to assure the visitor that something is happening.

    I have tried everything I can think of but cannot get the correct code for this. The live site is http://www.theimagecollective.com. Thank you in advance! Here is my css:

    .nav-container { background:#232324 url(../images/bkg_nav0.jpg) 50% 0 repeat-y; border-top-width: 1px;border-top-color: #39393A;border-top-style: solid;border-left-style: solid;border-left-color: #39393A;border-left-width: 1px;border-right-color:#39393A;border-right-style: solid;border-right-width: 1px;}
    #nav { width:918px; margin:0 auto; padding:0 14px; font-size:15px; }
    /* All Levels */ /* Style consistent throughout all nav levels */
    #nav li { position:relative; text-align:left; }
    #nav li.over { z-index:998; }
    #nav a,
    #nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
    #nav span { display:block; cursor:pointer; white-space:nowrap; }
    #nav li ul span {white-space:normal; }
    #nav ul li.parent a { background:#F9F9F9 }
    #nav ul li.parent li a { background-image:none; }
    /* 0 Level */
    #nav li { float:left; }
    #nav li.active a { color:#c93849; }
    #nav a { float:left; padding:6px 43px; color:#ddd; font-weight:normal; border-right-color:#39393A;border-right-style: solid;border-right-width: 1px;}
    #nav li.last a { border:0;}
    #nav li.over a,
    #nav a:hover { color:#c93849; }
    /* 1st Level */
    #nav ul li,
    #nav ul li.active { float:none; margin:0; padding-bottom:1px; background:#EDEEF0 url(../images/bkg_nav1.gif) 0 100% repeat-x; }
    #nav ul li.last { background:#EDEEF0; padding-bottom:0; }
    #nav ul a,
    #nav ul a:hover { float:none; padding:0; background:none;border:0; }
    #nav ul li a { font-weight:normal !important; }
    /* 2nd Level */
    #nav ul,
    #nav div { position:absolute; width:15em; top:33px; left:-10000px; border: 1px solid #CCCCCC;}
    #nav div ul { position:static; width:auto; border:none; }
    /* 3rd+ Level */
    #nav ul ul,
    #nav ul div { top:5px; }
    #nav ul li a { background:#F9F9F9; }
    #nav ul li a:hover { background:#fff; }
    #nav ul li a,
    #nav ul li a:hover { color:#2f2f2f !important; }
    #nav ul span,
    #nav ul li.last li span { padding:3px 15px 4px 15px; }
    Last edited by VIPStephan; 03-30-2013 at 12:37 AM. Reason: added code BB tags

  • #2
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Thanked 64 Times in 64 Posts
    traditionally one uses javaScript to handle onclick events.
    you could add extra class to clicked element and remove it afterwards.
    i didn't went trough your entire code, but i see you have jquery already loaded so it should be a moment for you

    and your site's performance is server-related rather then caused by volume
    + you have bunch of javacript errors

  • #3
    Regular Coder
    Join Date
    Mar 2013
    Thanked 67 Times in 67 Posts
    You'll want to look at the anchor pseudo-classes.

    Last edited by ttkim; 03-30-2013 at 01:19 AM.


    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts