Skip to content
This repository has been archived by the owner on Jan 22, 2024. It is now read-only.

Feature/mega menu #35

Merged
merged 9 commits into from
Jun 17, 2019
Merged

Feature/mega menu #35

merged 9 commits into from
Jun 17, 2019

Conversation

chrismlusk
Copy link
Owner

@chrismlusk chrismlusk commented May 1, 2019

Adds a DDR Mega Menu template with styles and scripts. (First attempt at #15.)

  • Shows three levels of nodes: root, child, grandchild.
  • Used alongside Bootstrap's .navbar-nav and related classes for the top-level menu.
  • Custom classes for the dropdown menus.
  • Each second-level menu is a column in the mega dropdown.
  • This template renders the Tab icon above each column.
    • If no icon, it renders a placeholder image (for now).
  • Each third-level menu is a list of links.
    • If no list of links, it renders the Tab description.

@chrismlusk
Copy link
Owner Author

chrismlusk commented May 1, 2019

@Accuraty, please do not merge this. Review only.

I'm opening this PR so you can check out the Razor/DDR implementation and offer feedback. Surely I've done something wrong or you can suggest improvements. This is also the code I've added to get the PDEG mega menu working, which you can see live at http://pdeg.accuraty.ws.

There are some style issues I'm aware of, but what do you think about this being a starting point for mega menus?

See issue #15 for more background.

@jeremy-farrance
Copy link
Collaborator

what do you think about this being a starting point for mega menus?

Seems perfect to me and looks easy to style. Only BIG question is how will it operate when on mobile?

@chrismlusk
Copy link
Owner Author

Ok cool. I haven't gotten to mobile yet. I figure it'll just collapse into a normal, multi-level menu that you tap to expand each section/sub-section. Thoughts, @Accuraty?

* dev: (37 commits)
  add starting styles for SVG icons
  update jquery
  reset Content Pane badge styles
  use plain-visited mixin for link color
  add full-bleed mixin
  inherit font family so we override 'default.css' styles
  update dependencies
  update dependencies
  update dependencies
  add conditional panes, rename pane to 'Sidebar', include home.js in 'Home'
  update stylelint deps
  add isMobileDevice helper func
  update dependencies
  rename aside pane to sidebar
  fixed header is no longer the default
  fixed header is no longer the default
  add EDN 10+ required template
  ignore 2sxc content .png files from vscode settings to reduce clutter
  improve sftp property order
  Add more IP addresses
  ...
…into feature/mega-menu

* 'dev' of https://github.com/chrismlusk/accuraty-templates:
  make sidebar menus toggle to display submenus
  update deps
@chrismlusk
Copy link
Owner Author

After more learning from ongoing development with PDEG, I think it will be easiest to lean more heavily on Bootstrap's .dropdown and .dropdown-menu components. Specifically, our mega menus need to be activated by click (not hover), so if we use these dropdown classes in our component, we will inherit all of the functionality from Bootstrap (instead of writing it ourselves).

@jeremy-farrance jeremy-farrance merged commit 05ccd74 into dev Jun 17, 2019
@jeremy-farrance jeremy-farrance deleted the feature/mega-menu branch June 17, 2019 12:54
@jeremy-farrance jeremy-farrance restored the feature/mega-menu branch June 17, 2019 12:58
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants