Simple Clickable dropdown menu HELP

haron1haron1 Registered Users Posts: 12 Big grins
edited January 5, 2016 in SmugMug Customization
Hy,
I am trying to find solution for dropdown menu sub-links which would stay after clicking, therefore eliminating need for breadcrumbs.
Something like on this site http://www.brookpifer.com
All submenu links I have seen are on hover and then disappear when clicked.

Thank you!

Comments

  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited December 29, 2015
    Open the menu settings and change the layout style to Accordion.
  • haron1haron1 Registered Users Posts: 12 Big grins
    edited December 29, 2015
    ChancyRat wrote: »
    Open the menu settings and change the layout style to Accordion.

    Thank you bat that doesn't solve my problem.
    It opens nicely when clicked but once you click submenu link, it doesn't stay open.
    I would like to have it open (expanded) and bold, or different colour so that user knows where it is.
    Also i would like to have option not to click on + sign, but on link itself.
  • haron1haron1 Registered Users Posts: 12 Big grins
    edited December 29, 2015
    haron1 wrote: »
    Thank you bat that doesn't solve my problem.
    It opens nicely when clicked but once you click submenu link, it doesn't stay open.
    I would like to have it open (expanded) and bold, or different colour so that user knows where it is.
    Also i would like to have option not to click on + sign, but on link itself.

    Just as in this link http://www.brookpifer.com/verizon-amplify-it
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 1, 2016
    haron1 wrote: »
    Just as in this link http://www.brookpifer.com/verizon-amplify-it

    Happy new year!

    I think that menu was created by adding separate links for each. Don't turn on Accordion style. Choose Vertical style, and then add each link separately. Drag each slightly to the right of the link you want it to nest under. I believe there is not a way, currently, to have the "+" list turned on and left on by default, although long ago I think a discussion on this forum mentioned that perhaps SM would consider that in the future.

    The menu content block allows you to change the font color to Emphasis (or a couple of other options). There might be CSS code to isolate one link out of the list, but I'm not good enough with CSS to help there.

    You could also create an HTML/CSS list of clickable links where you have much easier control over the color of individual links. I don't think there's a big difference between doing this method versus the Menu Content Block method, because with both of them, you have to manually add links, and if you change add or remove galleries in the future you will have to manually update both of these.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 1, 2016
    It occurs to me that you could also create this by adding more than one Menu Content block. The top one would be a Folder, with one of the font choices, e.g., Emphasis. Then the next content block with the sub-links added in one list, and choosing the Default font choice. You would still need to add each link separately. Repeat.

    This would be a way to obtain more than one font color (still within the limits of the available options in the Menu content block), using the Menu content blocks.
  • haron1haron1 Registered Users Posts: 12 Big grins
    edited January 5, 2016
    ChancyRat wrote: »
    Happy new year!

    I think that menu was created by adding separate links for each. Don't turn on Accordion style. Choose Vertical style, and then add each link separately. Drag each slightly to the right of the link you want it to nest under. I believe there is not a way, currently, to have the "+" list turned on and left on by default, although long ago I think a discussion on this forum mentioned that perhaps SM would consider that in the future.

    The menu content block allows you to change the font color to Emphasis (or a couple of other options). There might be CSS code to isolate one link out of the list, but I'm not good enough with CSS to help there.

    You could also create an HTML/CSS list of clickable links where you have much easier control over the color of individual links. I don't think there's a big difference between doing this method versus the Menu Content Block method, because with both of them, you have to manually add links, and if you change add or remove galleries in the future you will have to manually update both of these.



    Happy, happy.
    Adding link one after another is the way you should do it when making sublinks, but if using any other option than Accordion, sublinks do not open and move other links downwards. Accordion is the closest to what i want to achieve but only if the sublinks stayed open when clicked on it. Or maybe I didn't understand you good, but i have tried and didn't get desired result.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 5, 2016
    Glad you are happy but I am now confused.

    First, I'm so sorry to have mis-directed you. I just tested again and see you are right - if one chooses vertical, and drags a new link to the right to nest it under a link, it does not show up in the list. The behavior that results is only a hover behavior: hover over the visible link and the sublinks you've added pop up and are clickable.

    Then I tried your method and I don't see how it's possible to have the sublinks show up in any "nest" configuration, slightly to the right of the link above. Did you opt for just a single column with the same left margin?

    Then I got kinda mad. :D And achieved what I wanted this way:

    - Drag in Menu. Choose Accordion. Add one link. I chose all CAPs
    - Drag in another Menu. Choose Accordion. Add one link, with "Regular".
    - Change the triangle format of the 2nd link, left margin of "50". This moved it to the right under the link above.
    - Change the bottom margin of the top menu, and the top margin of the bottom menu, to zero, to move them closer to each other. (Negative margins would work also).

    I believe CSS would allow further changes, maybe to font color, position, etc.
  • haron1haron1 Registered Users Posts: 12 Big grins
    edited January 5, 2016
    ChancyRat wrote: »
    Glad you are happy but I am now confused.

    First, I'm so sorry to have mis-directed you. I just tested again and see you are right - if one chooses vertical, and drags a new link to the right to nest it under a link, it does not show up in the list. The behavior that results is only a hover behavior: hover over the visible link and the sublinks you've added pop up and are clickable.

    Then I tried your method and I don't see how it's possible to have the sublinks show up in any "nest" configuration, slightly to the right of the link above. Did you opt for just a single column with the same left margin?

    Then I got kinda mad. :D And achieved what I wanted this way:

    - Drag in Menu. Choose Accordion. Add one link. I chose all CAPs
    - Drag in another Menu. Choose Accordion. Add one link, with "Regular".
    - Change the triangle format of the 2nd link, left margin of "50". This moved it to the right under the link above.
    - Change the bottom margin of the top menu, and the top margin of the bottom menu, to zero, to move them closer to each other. (Negative margins would work also).

    I believe CSS would allow further changes, maybe to font color, position, etc.


    Haha sorry for misunderstanding.

    Ok I indestand you know, but wouldn't 2 menu items on mobile also showed as 2 small grey clickable menus?
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 5, 2016
    but wouldn't 2 menu items on mobile also showed as 2 small grey clickable menus?

    {SMACKS SELF ON FOREHEAD}
    Right again.
    I looked on my site for the example which I left up on the page, and the first link is a link, but the 2nd one is a Menu.

    I have no idea why one can't achieve a vertical menu with nested links, all of which are visible, not limited to hoverable, and which works on mobile...

    eek7.gif :cry eek7.gif
  • haron1haron1 Registered Users Posts: 12 Big grins
    edited January 5, 2016
    ChancyRat wrote: »
    {SMACKS SELF ON FOREHEAD}
    Right again.
    I looked on my site for the example which I left up on the page, and the first link is a link, but the 2nd one is a Menu.

    I have no idea why one can't achieve a vertical menu with nested links, all of which are visible, not limited to hoverable, and which works on mobile...

    eek7.gif :cry eek7.gif

    I know. I suppose that shouldn't be too complicated if some css skills are introduced. It should be like this http://www.brookpifer.com
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 5, 2016
    haron1 wrote: »
    I know. I suppose that shouldn't be too complicated if some css skills are introduced. It should be like this http://www.brookpifer.com

    That site, the links are clickable, and open to a list of sublinks. The plus sign is not visible (probably css to hide it), but the behavior of clicking to open is still following the normal rule.
Sign In or Register to comment.