Viewing Combine a horizontal menu bar with a dynamic drop-down submenu

Combine a horizontal menu bar with a dynamic drop-down submenu



User: Niels K. 9 years ago
I need to combine a horizontal menu bar with a vertical submenu whereby the content of the submenu is dynamically pushed down on clicking on the relevant button in the main menu; click on it again and it scrolls the sub-menu back up. Any ideas of how to do this?
User: Roddy 9 years ago
If you really need to drop down on click there are plenty of examples around like THIS.

There's extra work in creating this and keeping it updated but using a master page will speed things up.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Niels K. 9 years ago
Not clear to me whether the HTML/CSS code in the provided link gets pasted into the header section of the site publish page or a master page. What's the difference?

I want to like this software but keep bumping up against its limitations. The latest is the almost nonexistent options available when trying to style a drop-down menu (submenu); basically one can set the background color (and not even to transparent at that), and that's it. Forget about using a different font size, color, alignment, spacing etc etc.
User: Roddy 9 years ago
Head is not the same as header and you can't add HTML to head code.

CSS added to the head code box in the site publishing settings page is injected into every page of the site. In this case, the HTML would be added via a snippet on the first actual page and then copied and pasted to the others. This first page can be a "template" page as described here…

http://everwebcodebox.com/layout/page-template.html

CSS added to the Head code box on a master page will only be injected into pages that use the master page as a template. This is not necessarily every page of the site.

HTML added via an HTML snippet to the header of a master page will be injected into every page that uses the master template page.

Quote:
basically one can set the background color (and not even to transparent at that), and that's it


A transparent background to a drop down menu would render the text illegible in most cases.

Quote:
using a different font size, color, alignment, spacing etc etc.

If all these settings were added, the widget inspector would become more complicated than most users would want to cope with. There are many ways in which you can restyle the default navigation if you know some basic CSS…

http://everwebcodebox.com/layout/navigation.html

The other option is to go to one of the many sites that allow you to create your own custom CSS drop dow menu, get the code and paste it into the appropriate places in EW.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Niels K. 9 years ago
delete

Last edit 9 years ago
User: Niels K. 9 years ago
See attached link for a look at the drop-down; it simply doesn't work correctly, in my case at least. However I will play around with your suggestions, though with all the added coding it does beg the question of why not simply do the site in DW? Many thanks tho -

http://imageshack.com/a/img836/6757/rxqz.png

Last edit 9 years ago
User: Roddy 9 years ago
I guess you need no background rather than a transparent one?

Add this to the site wide head code box...

<style type="text/css">
#navmenu_menu0 ul ul li a,
#navmenu_menu0 ul li.active li a,
#navmenu_menu0 ul li:hover ul li a,
#navmenu_menu0 ul li.hover ul li a {
background:none}
</style>

Last edit 9 years ago

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Niels K. 9 years ago
Quote:
CSS added to the Head code box on a master page will only be injected into pages that use the master page as a template. This is not necessarily every page of the site


Doesn't appear possible to inject code into a master page (it's greyed out).
User: Niels K. 9 years ago
Having created the drop-down menu bar of my dreams (drop-down on click) by inserting css in the Head field of the the publish page with html added as a snippet in the master page I’m finding that it works very well but displays strangely; essentially I can’t change the size of the bounding box, which is much too big in relation to the menu bar itself, making it impossible to place correctly in the header section. Any ideas of what’s going on?
User: Roddy 9 years ago
Can you post the URL to the published page?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.