From 984741ca206576a6805b536784fdcffefb89bc9c Mon Sep 17 00:00:00 2001 From: Ringo De Smet Date: Fri, 1 Sep 2017 17:27:24 +0200 Subject: Support for menus containing sections of menu items. --- exampleSite/config.toml | 115 ++++++++++++++++++++++++++++++++++++++++------ layouts/partials/nav.html | 41 +++++++++++++---- 2 files changed, 134 insertions(+), 22 deletions(-) diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 7786bfb..029f0be 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -17,25 +17,114 @@ paginate = 10 # Main menu [[menu.main]] - name = "Home" - url = "/" - weight = 1 + name = "Home" + identifier = "menu.home" + url = "/" + weight = 1 [[menu.main]] - name = "Blog" - url = "/blog/" - weight = 2 + name = "Option 1: Default Page" + url = "/" + weight = 1 + parent = "menu.home" [[menu.main]] - name = "FAQ" - identifier = "faq" - url = "/faq/" - weight = 3 + name = "Option 2: Application" + url = "/" + weight = 2 + parent = "menu.home" [[menu.main]] - name = "Contact" - url = "/contact/" - weight = 4 + name = "Option 3: Startup" + url = "/" + weight = 3 + parent = "menu.home" + +[[menu.main]] + name = "Option 4: Agency" + url = "/" + weight = 4 + parent = "menu.home" + +[[menu.main]] + name = "Option 5: Portfolio" + url = "/" + weight = 5 + parent = "menu.home" + +[[menu.main]] + name = "Portfolio" + identifier = "menu.portfolio" + url = "/portfolio/" + weight = 3 + +[[menu.main]] + name = "Portfolio" + identifier = "section.portfolio" + url = "" + weight = 1 + parent = "menu.portfolio" + +[[menu.main]] + name = "2 Columns" + url = "" + weight = 1 + parent = "section.portfolio" + +[[menu.main]] + name = "2 Columns With Negative Space" + url = "" + weight = 1 + parent = "section.portfolio" + +[[menu.main]] + name = "About" + identifier = "section.about" + url = "" + weight = 2 + parent = "menu.portfolio" + +[[menu.main]] + name = "About Us" + url = "" + weight = 1 + parent = "section.about" + +[[menu.main]] + name = "Our Team" + url = "" + weight = 2 + parent = "section.about" + +[[menu.main]] + name = "Marketing" + identifier = "section.marketing" + url = "" + weight = 3 + parent = "menu.portfolio" + +[[menu.main]] + name = "Packages" + url = "" + weight = 1 + parent = "section.marketing" + +[[menu.main]] + name = "Blog" + identifier = "menu.blog" + url = "/blog/" + weight = 4 + +[[menu.main]] + name = "FAQ" + identifier = "menu.faq" + url = "/faq/" + weight = 5 + +[[menu.main]] + name = "Contact" + url = "/contact/" + weight = 6 # Top bar social links menu diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index e713b2c..0e06692 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -21,19 +21,42 @@ -- cgit v1.2.3 From 759e6598fe563dc0511e570fd62c48d61770a7f2 Mon Sep 17 00:00:00 2001 From: Ringo De Smet Date: Sun, 10 Sep 2017 12:19:47 +0200 Subject: Support for dropdowns containing single list of menu items, or the 4 column wide dropdown. Support for an optional image in the dropdown. --- README.md | 108 +++++++++- exampleSite/config.toml | 221 ++++++++++++++++++++- exampleSite/static/img/template-easy-customize.png | Bin 0 -> 101945 bytes exampleSite/static/img/template-homepage.png | Bin 0 -> 153072 bytes layouts/partials/nav.html | 77 ++++++- 5 files changed, 392 insertions(+), 14 deletions(-) create mode 100644 exampleSite/static/img/template-easy-customize.png create mode 100644 exampleSite/static/img/template-homepage.png diff --git a/README.md b/README.md index 0927aae..0def5b7 100644 --- a/README.md +++ b/README.md @@ -155,7 +155,113 @@ You can also define the menu items that will appear in the top bar. Edit the `[[ weight = 4 ``` -The `weight` parameter will determine the order of the menu entries. +The `weight` parameter will determine the order of the menu entries. A top level menu item can contain a dropdown with +an optional image, sections and multiple columns of menu items. + +To create a single list of menu items in the dropdown, first give your top level menu item unique identifier: + +```toml +[[menu.main]] + name = "Home" + identifier = "menu.home" + url = "/" + weight = 1 +``` + +Now create additional menu items and use the above unique identifier as the value for the parent attribute: + +``` +[[menu.main]] + name = "Option 1: Default Page" + url = "/" + weight = 1 + parent = "menu.home" + +[[menu.main]] + name = "Option 2: Application" + url = "/" + weight = 2 + parent = "menu.home" +``` + +It is also possible to display a dropdown menu with 4 columns. This theme supports 2 variations: +* 4 columns of menu items with sections +* 2 column wide image + 2 columns of menu items with sections + +To display 4 columns of menu items, start using sections. Sections are menu items threated special by this theme: + +``` +[[menu.main]] + name = "All Pages" + identifier = "menu.allpages" + url = "" + weight = 4 + +[[menu.main]] + name = "Home" + identifier = "section.ap-home" + url = "" + weight = 1 + parent = "menu.allpages" + post = 1 + +[[menu.main]] + name = "Portfolio" + identifier = "section.ap-portfolio" + url = "" + weight = 1 + parent = "menu.allpages" + post = 2 + +[[menu.main]] + name = "Shop" + identifier = "section.ap-shop" + url = "" + weight = 1 + parent = "menu.allpages" + post = 3 + +[[menu.main]] + name = "Blog" + identifier = "section.ap-blog" + url = "" + weight = 3 + parent = "menu.allpages" + post = 4 + +[[menu.main]] + name = "Blog Listing Big" + url = "/blog/" + weight = 1 + parent = "section.ap-blog" + +``` + +The above example shows a reduced version of the *All Pages* menu item from the example site. As you can see, +we first create menu items with an identifier starting with `section.`. If you create entries like this, these +will appear as section headers in your drop down. + +Each of these entries contain values for both the `weight` and `post` attribute. The `post` attribute is hijacked +to indicate in which column a section will be put in. Within a column, the `weight` value is respected to show the +sections top to bottom. + +Use to the unique section identifier (e.g. `section.ap-blog`) as the `parent` value to add a menu item to a specific +section. Using `weight` and `post` on the sections allow you to balance the columns with approximately the same +amount of entries. + +To display a 2 column wide image and 2 columns of menu items, the process is similar as above. However, we hijack +the `url` field of the top level menu item to link the image from our static assets: + +``` +[[menu.main]] + name = "Portfolio" + identifier = "menu.portfolio" + url = "/img/template-homepage.png" + weight = 3 +``` + +When a `url` is filled in, only column 1 and 2 (the `post` value in the section menu items) will be displayed. +When using an image, don't configure section menu items in column 3 or 4. **These will not be rendered.** ### Sidebar widgets diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 029f0be..def7af3 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -52,10 +52,98 @@ paginate = 10 weight = 5 parent = "menu.home" +[[menu.main]] + name = "Features" + identifier = "menu.features" + url = "/img/template-easy-customize.png" + weight = 3 + +[[menu.main]] + name = "Shortcodes" + identifier = "section.shortcodes" + url = "" + weight = 1 + parent = "menu.features" + post = 1 + +[[menu.main]] + name = "Header variations" + identifier = "section.headervariations" + url = "" + weight = 2 + parent = "menu.features" + post = 2 + +[[menu.main]] + name = "Accordions" + url = "" + weight = 1 + parent = "section.shortcodes" + +[[menu.main]] + name = "Alerts" + url = "" + weight = 2 + parent = "section.shortcodes" + +[[menu.main]] + name = "Buttons" + url = "" + weight = 3 + parent = "section.shortcodes" + +[[menu.main]] + name = "Content Boxes" + url = "" + weight = 4 + parent = "section.shortcodes" + +[[menu.main]] + name = "Horizontal Blocks" + url = "" + weight = 5 + parent = "section.shortcodes" + +[[menu.main]] + name = "Pagination" + url = "" + weight = 6 + parent = "section.shortcodes" + +[[menu.main]] + name = "Tabs" + url = "" + weight = 7 + parent = "section.shortcodes" + +[[menu.main]] + name = "Typography" + url = "" + weight = 8 + parent = "section.shortcodes" + +[[menu.main]] + name = "Default Sticky Header" + url = "" + weight = 1 + parent = "section.headervariations" + +[[menu.main]] + name = "No Sticky Header" + url = "" + weight = 2 + parent = "section.headervariations" + +[[menu.main]] + name = "Light Header" + url = "" + weight = 3 + parent = "section.headervariations" + [[menu.main]] name = "Portfolio" identifier = "menu.portfolio" - url = "/portfolio/" + url = "/img/template-homepage.png" weight = 3 [[menu.main]] @@ -64,6 +152,7 @@ paginate = 10 url = "" weight = 1 parent = "menu.portfolio" + post = 1 [[menu.main]] name = "2 Columns" @@ -74,7 +163,43 @@ paginate = 10 [[menu.main]] name = "2 Columns With Negative Space" url = "" - weight = 1 + weight = 2 + parent = "section.portfolio" + +[[menu.main]] + name = "3 Columns" + url = "" + weight = 3 + parent = "section.portfolio" + +[[menu.main]] + name = "3 Columns With Negative Space" + url = "" + weight = 4 + parent = "section.portfolio" + +[[menu.main]] + name = "4 Columns" + url = "" + weight = 5 + parent = "section.portfolio" + +[[menu.main]] + name = "4 Columns With Negative Space" + url = "" + weight = 6 + parent = "section.portfolio" + +[[menu.main]] + name = "Portfolio - detail" + url = "" + weight = 7 + parent = "section.portfolio" + +[[menu.main]] + name = "Portfolio - detail 2" + url = "" + weight = 8 parent = "section.portfolio" [[menu.main]] @@ -83,6 +208,7 @@ paginate = 10 url = "" weight = 2 parent = "menu.portfolio" + post = 2 [[menu.main]] name = "About Us" @@ -102,6 +228,7 @@ paginate = 10 url = "" weight = 3 parent = "menu.portfolio" + post = 2 [[menu.main]] name = "Packages" @@ -109,11 +236,97 @@ paginate = 10 weight = 1 parent = "section.marketing" +[[menu.main]] + name = "All Pages" + identifier = "menu.allpages" + url = "" + weight = 4 + +[[menu.main]] + name = "Home" + identifier = "section.ap-home" + url = "" + weight = 1 + parent = "menu.allpages" + post = 1 + +[[menu.main]] + name = "About" + identifier = "section.ap-about" + url = "" + weight = 2 + parent = "menu.allpages" + post = 1 + +[[menu.main]] + name = "Marketing" + identifier = "section.ap-marketing" + url = "" + weight = 3 + parent = "menu.allpages" + post = 1 + +[[menu.main]] + name = "Portfolio" + identifier = "section.ap-portfolio" + url = "" + weight = 1 + parent = "menu.allpages" + post = 2 + +[[menu.main]] + name = "User Pages" + identifier = "section.ap-userpages" + url = "" + weight = 2 + parent = "menu.allpages" + post = 2 + +[[menu.main]] + name = "Shop" + identifier = "section.ap-shop" + url = "" + weight = 1 + parent = "menu.allpages" + post = 3 + +[[menu.main]] + name = "Shop - Order Process" + identifier = "section.ap-shoporderprocess" + url = "" + weight = 2 + parent = "menu.allpages" + post = 3 + +[[menu.main]] + name = "Contact" + identifier = "section.ap-contact" + url = "" + weight = 1 + parent = "menu.allpages" + post = 4 + +[[menu.main]] + name = "Pages" + identifier = "section.ap-pages" + url = "" + weight = 2 + parent = "menu.allpages" + post = 4 + [[menu.main]] name = "Blog" - identifier = "menu.blog" + identifier = "section.ap-blog" + url = "" + weight = 3 + parent = "menu.allpages" + post = 4 + +[[menu.main]] + name = "Blog Listing Big" url = "/blog/" - weight = 4 + weight = 1 + parent = "section.ap-blog" [[menu.main]] name = "FAQ" diff --git a/exampleSite/static/img/template-easy-customize.png b/exampleSite/static/img/template-easy-customize.png new file mode 100644 index 0000000..6080be0 Binary files /dev/null and b/exampleSite/static/img/template-easy-customize.png differ diff --git a/exampleSite/static/img/template-homepage.png b/exampleSite/static/img/template-homepage.png new file mode 100644 index 0000000..6541b60 Binary files /dev/null and b/exampleSite/static/img/template-homepage.png differ diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 0e06692..8d0a343 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -20,7 +20,7 @@ {{ else }} -- cgit v1.2.3 From b7e0cabee56afe2bb258e54b613d17b12a990557 Mon Sep 17 00:00:00 2001 From: Guillermo Guerrero Ibarra Date: Wed, 4 Aug 2021 23:38:33 +0200 Subject: Highlight menu.. --- layouts/partials/nav.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 325f72b..f1f2b89 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -111,7 +111,7 @@ {{ end }} {{ else }} -
  • +
  • {{ .Name }}
    • {{ end }} -- cgit v1.2.3 From 4cad28689f6312d89e8ba6c0dd987e56bfee1f50 Mon Sep 17 00:00:00 2001 From: Guillermo Guerrero Ibarra Date: Thu, 5 Aug 2021 09:10:54 +0200 Subject: active before if. --- layouts/partials/nav.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index f1f2b89..3b98707 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -21,10 +21,14 @@ {{ $current := . }} {{ $topLevel := replace .URL "/" "" }} {{ range .Site.Menus.main.ByWeight }} + {{ $active := "" }} + {{ if eq $current.RelPermalink .URL | or (eq $current.Type $topLevel) | or (and (eq (default (trim .URL "/") .Identifier) "blog") (in (slice "taxonomy" "taxonomyTerm") $current.Kind)) }} + {{ $active = "active" }} + {{ end }} {{ if .HasChildren }} {{ $hasSections := (hasPrefix (index .Children 0).Identifier "section.") }} -
  • +
  • {{ if $hasSections }}
      @@ -111,7 +115,7 @@ {{ end }} {{ else }} -
    • +
    • {{ .Name }}
      • {{ end }} -- cgit v1.2.3