As you can see it gives a very annoying effect when the submenu is larger than it's parent. I'd like to keep the main-menu in the original height, but I really can't find the part that's responsible for this behaviour. It's a theme that's not built by me, so that makes it even harder to find a solution.
This is the live url: https://testing.sceneryworkshop.com
I'm almost on a mental breakdown here :D So IF anyone could help me out, it would be much appreciated!
As requested some code (I don't think this ads much extra to my post, but it may be). It's Lightspeed HQ which uses Twigg as far as I know. I guessed you'd like to have a Live url to inspect with inspector to see it in action.
<div class="nav-main">
<ul>
<li><a>{{ 'Menu' | t }}</a>
<ul>
{% for category in shop.categories | limit(10) %}
<li><a href="{{ category.url | url }}">
{% if theme.show_category_images %}<span class="img"><img src="{{ category.image | url_image('64x44x2', category.title) }}" alt="{{ category.title }}" width="32" height="22"></span>{% endif %}{{ category.title }}</a>
{% if category.subs %}
<ul>
<li class="strong">{{ category.title }}</li>
{% for category in category.subs %}
<li>{{ category.title }}
{% if category.subs %}
<ul>
<li class="strong">{{ category.title }}</li>
{% for category in category.subs %}
<li>{{ category.title }}
{% if category.subs %}
<ul>
<li class="strong">{{ category.title }}</li>
{% for category in category.subs %}
<li>{{ category.title }}</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% if shop.categories | length > 10 %}
<li>{{ 'All categories' | t }}</li>
{% endif %}
</ul>
</li>
</ul>
</div>
Thanks #Elad! Without you I never found this! You made my day!
Commenting out that part solved the problem!
$(this).find('li.sub').on('mouseenter', function() {
$(this).delay(250).queue(function() {
// $(this).parents('ul').css('min-height', $(this).children('ul').outerHeight());
$(this).parents('ul:first').addClass('has-hover');
$(this).dequeue();
});
}).on('mouseleave', function() {
$(this).parents('ul').removeAttr('style');
$(this).parents('ul:first').removeClass('has-hover');
});
} ```
Related
I run a Jekyll blog in multiple languages using the setup making Jekyll multilingual by Sylvain Durand without use of any plugin.
All posts have the following markup:
---
title: Hello world!
lang: en
ref: hello
---
The posts are using the normal folder structure:
jekyll
|
-- posts
|
--name-of-post
--name-of-post-2
--name-of-post-3
I have a page named en.md which have layout: home and lang: en markup, which displays English posts correctly with the following code in home.html
{% assign posts=site.posts | where:"lang", page.lang %}
<ul>
{% for post in posts %}
<li>
{{ post.title }}
</li>
{% endfor %}
</ul>
But I would like instead to display posts by category, filtered on the language.
Tried to achieve this with the following:
{% assign posts=site.categories | where:"lang", page.lang %}
<div class="categories">
{% for category in site.categories %}
<li><a name="{{ category | first }}">{{ category | first }}</a>
<ul>
{% for posts in category %}
{% for post in posts %}
<li>{{ post.title }}</li>
{% endfor %}
{% endfor %}
</ul>
</li>
{% endfor %}
</div>
When I build, the following message is displayed
Liquid Exception: no implicit conversion of String into Integer in /_layouts/home.html
Tried many variants, but none seems to work.
This does the trick :
---
Title: English posts
lang: en
---
<ul>
{% for category in site.categories %}
{% comment %}
Here we have something like this
category = Array[
"category1",
[doc1, doc2]
]
{% endcomment %}
{% assign name = category[0] %}
{% assign posts = category[1] %}
{% comment %}
>> This also works
{% assign name = category.first %}
{% assign posts = category.last %}
{% endcomment %}
{% comment %}
>> Filtering posts based on their `lang` variable
>> and on the current `page.lang`
{% endcomment %}
{% assign selectedPosts = posts | where:"lang", page.lang %}
{% comment %}
>> Let's make sure that we need to print something
{% endcomment %}
{% if selectedPosts.size > 0 %}
<li>
Category {{ name }} :
<ul>
{% for post in selectedPosts %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
Short version :
<ul class="post-list">
{% for c in site.categories %}
{% assign selectedPosts = c.last | where:"lang", page.lang %}
{% if selectedPosts.size > 0 %}
<li>Category {{ c.first }} :
<ul>
{% for post in selectedPosts %}
<li>{{ post.title }} - {{ post.lang }}</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
WITH the built-in category solution of Jekyll
I found this partial solution, just like you did...:
{% for category in site.categories %}
<li><a name="{{ category | first }}">{{ category | first }}</a>
<ul>
{% for posts in category %}
{% for post in posts %}
<li>{{ post.title }}</li>
{% endfor %}
{% endfor %}
</ul>
</li>
{% endfor %}
What you want to do/did is filter the 'posts' variable with the page language. This can indeed be done with assign using a where filter, but should look like this (as 'lang' is a attribute of the individual post and not of the category):
{% assign lang_posts = posts | where:"lang", page.lang %}
This leads to the following code:
{% for category in site.categories %}
<li><a name="{{ category | first }}">{{ category | first }}</a>
<ul>
{% for posts in category %}
{% assign lang_posts = posts | where:"lang", page.lang %}
{% for post in lang_posts %}
<li>{{ post.title }}</li>
{% endfor %}
{% endfor %}
</ul>
</li>
{% endfor %}
WITHOUT the built-in category solution of Jekyll
If you have a random list of categories in your front matter, like this:
- categories:
- web
- css
- internet
... and your sites _config.yml contains a similar (but more complete) list, like this:
- categories:
- web
- css
- internet
- html5
- jekyll
You have a whole other problem. In that case you are NOT using the built-in category solution of Jekyll and this solution does not apply. A lot of the statements mean different things in that case, like this:
{% for category in site.categories %}
{{ category | first }}
It means you loop over all existing categories from the _config.yml, and category | first should then be category. In this situation you probably want something like this:
<ul class="categories">
{% for category in site.categories %}
<li><a name="{{ category }}">{{ category }}</a>
<ul>
{% assign posts=site.posts | where:"lang", page.lang %}
{% for post in posts %}
{% if post.categories contains category %}
<li>{{ post.title }}</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
Note that this is just simple Jekyll/liquid array logic that overwrites the Jekyll category variables.
I'm making a website on jekyll and I use this code for the menu:
{% for page in site.pages %}
<li>{{ page.title }}</li>
{% endfor %}
But it adds to my menu an empty item of home page, that I don't need:
<li></li>
How can I remove it?
Original jekyll does :
{% for my_page in site.pages %}
{% if my_page.title %}
<a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
{% endif %}
{% endfor %}
But your can test on any page variable.
If you want to discriminate page depending on a type, you can set a front matter variable like type: toto and then generate your menu like this :
{% for my_page in site.pages %}
{% if my_page.type == 'toto' %}
<a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
{% endif %}
{% endfor %}
Lets say it's the code snippet:
<ul>
{% assign navigation = site.data.nav %}
{% for link in navigation %}
{% assign active = nil %}
{% for sublink in link.submenu %}
{% if page.url contains sublink.url %}
{% assign active = 'active' %}
{% endif %}
{% endfor %}
{% if page.url contains link.url %}
{% assign active = 'active' %}
{% endif %}
<li class="{{ active }}>
{{ link.text }}
{% if link.submenu %}
<ul>
{% for sublink in link.submenu %}
<li {% if page.url contains sublink.url %}class="active"{% endif %}>
{{ sublink.text }}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
The nav.yml file looks like this:
- text: First Menu
url: /modules/some text/introduction/
- text: Second Menu
url: /modules/some more text/intro-text/
submenu:
- text: Level Two First
url: /modules/level two first/intro-text/
- text: Level Two Second
url: /modules/level two second/intro-text/
So, every menu item renders and also works fine as it should be. But the only issue i'm getting here is the variable active isn't getting updated according to those if rather staying nil. Also the following line isn't getting that active class rendered even if the page.url contains sublink.url or link.url
<li {% if page.url contains sublink.url %}class="active"{% endif %}>
What might be the issue??
I'm using node sorting to determine pages within a subfolder in Jekyll. This image shows my folder structure:
So let's say I have a page at http://localhost/grain/ahvsuperb/ (shown below as index.html). Navigating to this page would show the class on added to that link. That works fine.
Where I'm running into trouble is when I navigate to a page such as http://localhost/grain/ahvsuperb/features/. When I navigate to that page, both index AND features have the on class added to them. Any insight as to how to filter that out with Liquid?
<div class="content_nav">
<ul class="content_nav">
{% assign sorted_pages = site.pages | sort: 'weight' %}
{% for node in sorted_pages %}
{% if node.title != nil and node.url != '/' %}
{% capture nodediff %}{{ page.url | remove:node.url }}{% endcapture %}
<li><a {% if nodediff != page.url %}class="on" {% endif %}href="{{node.url}}">{{node.title}}</a></li>
{% endif %}
{% endfor %}
<li style="float:right"><a class="brochured" href="javascript:void(0);" rel="#brochuredl">Brochure</a></li>
<li style="float:right"><a class="quoted" href="#">Get a Quote</a></li>
</ul>
</div>
Thanks!
Your {% capture nodediff %}{{ page.url | remove:node.url }}{% endcapture %} then {% if nodediff != page.url %} are not returning expected page determination.
This will do the job :
<div class="content-nav">
<ul class="content-nav">
{% assign sorted_pages = site.pages | sort: 'weight' %}
{% for node in sorted_pages %}
{% if node.title != nil and node.url != '/' %}
<li><a {% if node.url == page.url %}class="on" {% endif %}href="{{node.url}}">{{node.title}}</a></li>
{% endif %}
{% endfor %}
<li style="float:right"><a class="brochured" href="javascript:void(0);" rel="#brochuredl">Brochure</a></li>
<li style="float:right"><a class="quoted" href="#">Get a Quote</a></li>
</ul>
</div>
I'm using Hyde theme (it's version 2.0)
Having trouble with making sidebar's 'About' link to work.
It's hosted at Github's Pages. (my github repositiory)
Here's the default code that's in sidebar.html. How do I make the 'About' link work?
<div class="sidebar">
<div class="container sidebar-sticky">
<div class="sidebar-about">
<h1>{{ site.title }}</h1>
<p class="lead">{{ site.description }}</p>
</div>
<ul class="sidebar-nav">
<li class="sidebar-nav-item{% if page.title == "Home" %} active{% endif %}">
Home
</li>
{% comment %}
The code below dynamically generates a sidebar nav of pages with
`layout: page` in the front-matter. See readme for usage.
{% endcomment %}
{% assign pages_list = site.pages %}
{% for node in pages_list %}
{% if node.title != null %}
{% if node.layout == "page" %}
<li class="sidebar-nav-item{% if page.url == node.url %} active{% endif %}">
{{ node.title }}
</li>
{% endif %}
{% endif %}
{% endfor %}
<li class="sidebar-nav-item">About</li>
<li class="sidebar-nav-item">Download</li>
<li class="sidebar-nav-item">GitHub project</li>
<li class="sidebar-nav-item">Currently v{{ site.version }}</li>
</ul>
<p>© {{ site.time | date: '%Y' }}. All rights reserved.</p>
Just {{ site.baseurl }} missing in from your links.
{% assign pages_list = site.pages %}
{% for node in pages_list %}
{% if node.title != null %}
{% if node.layout == "page" %}
<li class="sidebar-nav-item{% if page.url == node.url %} active{% endif %}">
{{ node.title }}
</li>
{% endif %}
{% endif %}
{% endfor %}
<li class="sidebar-nav-item">About</li>
Markdown will be rendered to html, it should be:
<li class="sidebar-nav-item">About</li>
I just forked your repo, see here:
http://www.madhur.co.in/MapExplorer/about/