Options

making a hover and active state in menus

grosloulougrosloulou Registered Users Posts: 87 Big grins
edited September 9, 2013 in SmugMug Customization
hallo,
on :
http://portfolio.scottkelby.com/
there is a hover color at mouse rollover
but not on mine :
http://labrophotography.smugmug.com/Galleries
did i miss the parameter somewhere ?

It would also be nice the menu keeps the active color when its corresponding page is selected which is not the case for kelby site.
If i can do that I will perhaps be able to remove the "galleries" and "events" titles on corresponding pages (can we ?) and have thumbs 12px only far from header

best regards
marc

Comments

  • Options
    juanherediajuanheredia Registered Users Posts: 345 Major grins
    edited August 8, 2013
    Any progress about this. I'd like to implement it in my site too.
    Juan Carlos Heredia | Photography
  • Options
    RKnechtRKnecht Registered Users Posts: 366 Major grins
    edited August 8, 2013
    It's been discussed. See this thread:

    http://www.dgrin.com/showthread.php?t=237856

    I use it on my navbar along with a fading hover effect. Not sure about the active color.
    A few Nikon bodies and some fast Nikon glass

    www.richknechtphotography.com
  • Options
    WinkXR6TWinkXR6T Registered Users Posts: 61 Big grins
    edited August 9, 2013
    I just got this working on my site...

    First you have to add code for the hover effect:
    /* Adds hover effect to navbar */
.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
  color: #[COLOR=Red]ffffff[/COLOR]!important;
}
    Just make sure you pick a text colour that will show the transition. If you don't want white as the hover colour then just change the colour code that I've highlighted in red above.


    Then add the transition code and you can change the duration to suit your liking:
    /* Adds hover transition effect to navbar */
a { 
    -webkit-transition:color 0.2s ease-in;
    -moz-transition:color 0.2s ease-in;
    transition:color 0.2s ease-in;
}
    http://photosbyadamlee.com
  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited August 11, 2013
    Why do you need both of these lines?
    .sm-page-widget-nav-toplink a :hover,  .sm-page-widget-nav-toplink a:hover
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited August 11, 2013
    brandofamily wrote: »
    Why do you need both of these lines?
    .sm-page-widget-nav-toplink [COLOR=Red]a :hover[/COLOR],  .sm-page-widget-nav-toplink [COLOR=Red]a:hover[/COLOR]
    Historically, IE used the "a :hover" to work. Latest versions might have been fixed.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    [Deleted User][Deleted User] Pro Nerd, Amateur Photog CanadaPosts: 0 Big grins
    edited September 2, 2013
    The user and all related content has been deleted.
  • Options
    Dave17Dave17 Registered Users Posts: 86 Big grins
    edited September 2, 2013
    How would I change this code to say change the menu text (on left - see pic) to red when hovering over one of the menu items?

    Thanks,
    --Dave
  • Options
    Dave17Dave17 Registered Users Posts: 86 Big grins
    edited September 2, 2013
    Nevermind - got it working :D
    --Dave
  • Options
    [Deleted User][Deleted User] Pro Nerd, Amateur Photog CanadaPosts: 0 Big grins
    edited September 8, 2013
    The user and all related content has been deleted.
  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited September 8, 2013
    ShutterSpy wrote: »
    Anyone figure out how to make the pop-out menus fade/transition?

    I'm talking about when a submenu pops-out. It just appears and doesn't flow with the rest of the smooth fade transitions.


    Work with this... this is for drop menu. I'm not sure if that's what you have but it will get you started. 
    /*Adds Hover Transition Effect to Nav Bar*/
a { 
    -webkit-transition:color 0.2s ease-in;
    -moz-transition:color 0.2s ease-in;
    transition:color 0.2s ease-in;
}

.yui3-menu-children {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.yui3-menu-open > .yui3-menu-children {
    opacity: 1;
}
  • Options
    grosloulougrosloulou Registered Users Posts: 87 Big grins
    edited September 9, 2013
    brandofamily wrote: »
    Work with this... this is for drop menu. I'm not sure if that's what you have but it will get you started. 
    /*Adds Hover Transition Effect to Nav Bar*/
a { 
    -webkit-transition:color 0.2s ease-in;
    -moz-transition:color 0.2s ease-in;
    transition:color 0.2s ease-in;
}

.yui3-menu-children {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.yui3-menu-open > .yui3-menu-children {
    opacity: 1;
}

    hallo everybody,
    there are lot of posts about hover and active menus but there are so many that finally i don't know what to do.
    here is my site where hover is working nice :
    http://www.labrophotography.com/

    what must i add and WHERE (not familiar with html/css menus of new smugmug) to have active color same color than hover color when a page is active ?
    for instance if i select about, about page is displayed and color of menu is white

    best regards
    marc
  • Options
    [Deleted User][Deleted User] Pro Nerd, Amateur Photog CanadaPosts: 0 Big grins
    edited September 9, 2013
    The user and all related content has been deleted.
  • Options
    [Deleted User][Deleted User] Pro Nerd, Amateur Photog CanadaPosts: 0 Big grins
    edited September 9, 2013
    The user and all related content has been deleted.
Sign In or Register to comment.