I'm working with Jekyll to create a blog and was wondering how I can use liquid to have different links for the nav on different pages. I've done this before using Shopify, but for some reason its not the same with Jekyll.
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
{% if page.handle contains 'blogs' %}
<li>Home</li>
{% else %}
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
<li>Section 5</li>
{% endif %}
</ul>
</div>
There is no page.handle in Jekyll. You can try to use page.path instead.
Related
I have included header.html in index.jsp using
<%# include file="include_files/header.html" %>
Now I want to include same header on multiple pages but the active tab should be set to different tab each time.
Please suggest.
The Header.html has this ul.
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<h1 class="logo mr-auto">Euc Stories</h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <img src="assets/img/logo.png" alt="" class="img-fluid">-->
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Courses</li>
<li>Trainers</li>
<li>Events</li>
<li>Pricing</li>
<li class="drop-down">Drop Down
<ul>
<li>Drop Down 1</li>
<li class="drop-down">Deep Drop Down
<ul>
<li>Deep Drop Down 1</li>
<li>Deep Drop Down 2</li>
<li>Deep Drop Down 3</li>
<li>Deep Drop Down 4</li>
<li>Deep Drop Down 5</li>
</ul>
</li>
<li>Drop Down 2</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<!-- .nav-menu -->
Get Started </div>
</header>
Send page name to each url ie index.html?page_name=home
Then call the page name variable from within your page
$page_name = $_GET['page_name'];
You could use a switch statement to set the active link
switch ($page_name){
case 'home':
$active ='active';
break;
case 'about':
$active1 ='active';
break;
case 'courses':
$active2 ='active';
break;
case 'trainers':
$active3 ='active';
break;
default:
// Set a default
}
Then set your links up to activate if the condition from the switch statement is true.
<li><a class="<?= $active; ?> nav-btn" href="#">Home</a></li>
<li><a class="<?= $active1; ?> nav-btn" href="#">about</a></li>
<li><a class="<?= $active2; ?> nav-btn" href="#">courses</a></li>
<li><a class="<?= $active3; ?> nav-btn" href="#">Teachers</a></li>
You will need to set a default. Maybe an if statement. if(!isset($page_name)){ $page_name="home"; }
I tried below one after each list.
Please suggest if any different more feasible approach.
header.jsp:
<%
String uri = request.getRequestURI();
String page_name = uri.substring(uri.lastIndexOf("/")+1);
System.out.println("Page Name: "+page_name);
%>
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<h1 class="logo mr-auto">Euc Stories</h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <img src="assets/img/logo.png" alt="" class="img-fluid">-->
<nav class="nav-menu d-none d-lg-block">
<ul>
<li <% if("index.jsp".equals(page_name) || page_name.length()==0) out.print("class=\"active\""); %>>Home</li>
<li <% if("about.jsp".equals(page_name)) out.print("class=\"active\""); %>>About</li>
<li <% if("courses.jsp".equals(page_name)) out.print("class=\"active\""); %>>Courses</li>
<li <% if("trainers.jsp".equals(page_name)) out.print("class=\"active\""); %>>Trainers</li>
<li <% if("events.jsp".equals(page_name)) out.print("class=\"active\""); %>>Events</li>
<li <% if("pricing.jsp".equals(page_name)) out.print("class=\"active\""); %>>Pricing</li>
<li class="drop-down">Drop Down
<ul>
<li>Drop Down 1</li>
<li class="drop-down">Deep Drop Down
<ul>
<li>Deep Drop Down 1</li>
<li>Deep Drop Down 2</li>
<li>Deep Drop Down 3</li>
<li>Deep Drop Down 4</li>
<li>Deep Drop Down 5</li>
</ul>
</li>
<li>Drop Down 2</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
</ul>
</li>
<li <% if("contact.jsp".equals(page_name)) out.print("class=\"active\""); %>>Contact</li>
</ul>
</nav>
<!-- .nav-menu -->
Get Started </div>
</header>
How do I hide the drop-down button to the hover or click to display it? I specifically use foundation zurb plugin. Look my code:
HTML:
<ul class="menu" data-drilldown data-back-button='<li class="js-
drilldown-
back"><a class="new-back"></a></li>'style="width: 200px" id="m1">
<li>
Item 1
<ul class="menu">
<li>
Item 1A
<ul class="menu">
<li>Item 1Aa</li>
<li>Item 1Ba</li>
<li>Item 1Ca</li>
</ul>
</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li>
Item 2
<ul class="menu">
<li>Item 2A</li>
<li>Item 2B</li>
<li>Item 2C</li>
</ul>
</li>
</ul>
The code doesn't mean much to you if you haven't used the drill dropdown foundation zurb plugin.
I am using Jasny Bootstrap for my responsive website. However, the links for the sub-navigations does not work on mobile. I am able to click into the links when I test it on my desktop. But when I test it on my phone, it only closes the navigation side bar. Following is my code:
<!--mobile nav-->
<nav id="mob-nav" class="navmenu navmenu-inverse navmenu-fixed-right offcanvas" role="navigation">
<ul class="nav navmenu-nav">
<li class="active"><span>Home</span></li>
<li class="dropdown"><span>Courses</span> <b class="caret"></b>
<ul class="dropdown-menu navmenu-nav" role="menu">
<li class="dropdown">Sub Nav 1</li>
<li class="divider"></li>
<li class="dropdown">Sub Nav 2</li>
<li class="divider"></li>
<li class="dropdown">Sub Nav 3</li>
<li class="divider"></li>
<li class="dropdown">Sub Nav 4</li>
</ul>
</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
<li>Navigation 4</li>
<li>Navigation 5</li>
</ul>
</nav>
<!--end mobile nav-->
Could it be a case of clashing js?
Edit: I did some trial and error and found that the class "navmenu-nav" is causing the problem. But I am still unsure how I can debug this.
These are the only js attached:
<script src="js/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jasny-bootstrap.js"></script>
<script src="js/readmore.js"></script>
Just found the answer!
Add: .navmenu-nav.dropdown-menu { position:relative; } to your CSS and like magic, it will work!
I have a menu structure, like this:
<nav id="main">
<ul id="nav-user">
<li class="user-name">
<span class="name">John Doe</span>
<ul class="submenu">
<li>Profile</li>
<li>Settings</li>
<li>Sign Out</li>
</ul>
</li>
</ul>
<ul id="nav-main">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>
I'm having an issue with ul.submenu. It's overlaying ul#nav-main, but for some reason it's transparent:
http://jsfiddle.net/JvALU/
I don't want to see the ul#nav-main. How can I change that?
z-index can only be used with elements that are positioned relative, absolute, or fixed. Try adding position: relative; to ul.submenu.
Hope this helps.
I have a very good menu right here:
http://jsfiddle.net/y9jbQ/
<ul id="nav">
<li>Menu 1
<ul class="nav first">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4
<ul class="nav">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
the problem is now, let's say I want a right-arrow image, aligned to right in case when there's an other sub menu. Putting inside isn't healthy thing. I don't want to create anything to copy 's behaviour. So,
<li><div float left><div float right></li>
is not a good way.
Use a CSS Child Selector:
ul.root > li > a { /* css declarations */ }
This will only apply the rules to the direct descendants of the root ul element.
Illustration:
<ul class="root">
<li>
<!-- MATCH -->
</li>
<li>
<!-- MATCH -->
<ul>
<li>
<!-- NO MATCH -->
</li>
</ul>
</li>
</ul>