Header submenus

theme-component

(Joe) #1

This component relies on the new interface for adding long lists that Joffrey created recently :heart_eyes:
Because of that, you need an up-to-date beta-branch Discourse install to use it.


This is a theme component that will allow you to build a header menu - with submenus - using plain text!

Repository link
https://github.com/hnb-ku/discourse-header-submenus

Preview:
https://theme-creator.discourse.org/theme/Johani/header-submenus


Samples

Desktop

Mobile

Settings

There are four groups of settings

  1. Menu items

    Enter the items you want to appear on the menu. One comma-delimited item per line in this order

    Text, icon, title, view

    Text: what appears on the menu.
    Icon: the icon displayed next to the item. If you do not want to use an icon, use none.
    Title: the text that appears when the item is hovered.
    View: Choose what devices the item appears on.

    β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž vdm appears on both desktop and mobile
    β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž vdo appears on desktops only,
    β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž β€β€β€Ž vmo appears on mobiles only.

    Due to lack of space, it is not recommended to add more than 3-4 items on mobile.

  2. Submenu items

    Enter a list of the submenu items you want to add to your menu. One comma-delimited item per line in this order

    Parent, text, icon, URL, target, title

    Parent: the name of the parent menu item which this submenu item should show under. Use the text value from the list above.
    Text: the text that shows for this submenu item.
    Icon: the icon for this submenu item, use none if no icon is needed.
    URL: the path this menu item links to. You can use relative paths as well.
    Target: Choose whether this item will open in a new tab or in the same tab. Use blank to open the link in a new tab, or use self to open it in the same tab.
    Title: the text that shows when the item is hovered.
    Dividers: You can also add dividers between submenu items. To add a divider use parent, divider.

Here’s a quick example to cover points 1 and 2 above:

Let’s say I want to add a menu item called Design and add a few items to its submenu like so

4

I would first enter this as a menu_item

Design, magic, Get inspired!, vdm

And then enter these as sub_menu items

Design, Galleries, th, #, blank, Cool galleries for you to look at.
Design, Design process, lightbulb-o, #, blank, Learn the basics.
Design, Blog design, columns, #, blank, What makes for a great blog?
Design, divider
Design, Freebies, gift, #, blank, Everyone likes freebies!
Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.
Design, Design trends, bar-chart, #, blank, Stay on top of the current trends!

That’s it!

The theme comes with a placeholder menu by default, so have a look at that and ask if you have questions.

  1. Layout options.

    these are pretty self-explanatory

  2. Color options

    These are empty by default, but if you add a color here, it will override the component’s defaults which are based on the current color scheme.

How do I install this theme component?

Follow the theme installation guide and add the theme component to your active themes.

If you’re new to Discourse themes, you can learn more about them here.

Credits

This component uses Cory LaViska’s lightweight jquery-dropdown library but since it’s so tiny, it’s bundled in the theme and there are no extra HTTP requests.


Custom hamburger menu links
(Gregory Reyes) #2

Hey @Johani!

Awesome job. Apologies because this might be a noob question but how did you organize the categories and topics in your sample? The Category’s on the left side with the latest Topics of each Category seen on the right side. It’s something I’m interested in applying.

All the best!


(Joe) #3

You do this by setting the category page to be the homepage.

The easiest way to set it up is to go to
your.site.com/wizard/steps/homepage

and select categories as the homepage.