gulp-file-include and navbar class="active" - gulp

I use gulp-file-include to combine many html file with the same header.
src/_header.html
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
src/index.html
##include('_header.html')
index blah...
src/about.html
##include('_header.html')
about blah...
Can I make the render result page like below?
With a class="active" on different nav item of each page.
dist/index.html
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
</ul>
</nav>
index blah...
dist/about.html
<nav>
<ul>
<li>Home</li>
<li class="active">About</li>
</ul>
</nav>
about blah...


I tried a WORKAROUND , maybe there is a better solution.
But for now try this....
src/_header.html
<nav>
<ul>
<li class="##activeclassHome">Home</li>
<li class="##activeclassAbout">About</li>
</ul>
</nav>
src/index.html
##include('_header.html', {activeclassHome": "active", "activeclassAbout": ""})
src/about.html
##include('_header.html', {activeclassHome": "", "activeclassAbout": "active"})
rendered pages:
dist/index.html
<nav>
<ul>
<li class="active">Home</li>
<li class="">About</li>
</ul>
</nav>
dist/About.html
<nav>
<ul>
<li class="">Home</li>
<li class="active">About</li>
</ul>
</nav>
UPDATE: Better use Nunjucks
a template engine to be used in client/server


I used gulp-file-include if statement
src/_header.html
<nav>
<ul>
<li class="##if (context.page === 'home') {active}">
Home
</li>
<li class="##if (context.page === 'about') {active}">
About
</li>
</ul>
</nav>
src/index.html
##include('_header.html', {
"page": "home"
})
src/about.html
##include('_header.html', {
"page": "about"
})
rendered pages:
dist/index.html
<nav>
<ul>
<li class="active">Home</li>
<li class="">About</li>
</ul>
</nav>
dist/about.html
<nav>
<ul>
<li class="">Home</li>
<li class="active">About</li>
</ul>
</nav>

Related

add space between ul and li tag css inline

I've the following code with nested list items as shown below:
<ul style={{padding-top: '15px'}}>
<li style={{margin-left: '20px'}}>First Services</li>
<ul style={{margin-left: '30px'}}>
<li>get1</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get2</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get3</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get4</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get5</li>
</ul>
<li style={{margin-left: '20px'}}>Second Services</li>
<ul style={{margin-left: '30px'}}>
<li>get6</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get7</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get8</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get9</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get10</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get11</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get12</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get13 </li>
</ul>
<li style={{margin-left: '20px'}}>Workflows</li>
<ul style={{margin-left: '30px'}}>
<li>Workflow for someone </li>
</ul>
</ul>
My Goal:
I want some space between the following:
1) First Services and get1
2) get5 and Second Services
3) Second Services and get6
4) get13 and Workflows
5)Workflows and Workflow for someone
How should I go about it? Is adding an empty paragraph tag <p></p> a good idea between each of the above 5 things?

if you mean horizontal space (white space), use: &nbsp ;
if you mean vertical space, try: (CSS property) line-height, padding
or margin.
you might want to remove this from being inline and use your linked stylesheet instead as it might cause issues with your styling.

You should use classes for this. Right now, the simplest way is to wrap a div around your whole list, apply a class to it (in my example I used parent_class) and use this selector: div.parent_class > ul >li It only selects the li elements of the first level ul:
div.parent_class > ul >li {
margin-top: 10px;
margin-bottom: 10px;
}
<div class="parent_class">
<ul style="padding-top:15px;">
<li style="margin-left:20px">First Services</li>
<ul style="margin-left:30px">
<li>get1</li>
</ul>
<ul style="margin-left:30px">
<li>get2</li>
</ul>
<ul style="margin-left:30px">
<li>get3</li>
</ul>
<ul style="margin-left:30px">
<li>get4</li>
</ul>
<ul style="margin-left:30px">
<li>get5</li>
</ul>
<li style="margin-left:20px">Second Services</li>
<ul style="margin-left:30px">
<li>get6</li>
</ul>
<ul style="margin-left:30px">
<li>get7</li>
</ul>
<ul style="margin-left:30px">
<li>get8</li>
</ul>
<ul style="margin-left:30px">
<li>get9</li>
</ul>
<ul style="margin-left:30px">
<li>get10</li>
</ul>
<ul style="margin-left:30px">
<li>get11</li>
</ul>
<ul style="margin-left:30px">
<li>get12</li>
</ul>
<ul style="margin-left:30px">
<li>get13 </li>
</ul>
<li style="margin-left:20px">Workflows</li>
<ul style="margin-left:30px">
<li>Workflow for someone </li>
</ul>
</ul>
</div>

.example-list {
margin:0px;
}
.example-list > li {
margin: 30px 0px;
}
<ul class="example-list">
<li>First Services</li>
<ul>
<li>get1</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get2</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get3</li>
</ul>
<ul>
<li>get4</li>
</ul>
<ul>
<li>get5</li>
</ul>
<li style={{margin-left: '20px'}}>Second Services</li>
<ul>
<li>get6</li>
</ul>
<ul>
<li>get7</li>
</ul>
<ul>
<li>get8</li>
</ul>
<ul>
<li>get9</li>
</ul>
<ul>
<li>get10</li>
</ul>
<ul>
<li>get11</li>
</ul>
<ul>
<li>get12</li>
</ul>
<ul>
<li>get13 </li>
</ul>
<li style={{margin-left: '20px'}}>Workflows</li>
<ul>
<li>Workflow for someone </li>
</ul>
</ul>

I would do the following (or something similar - keep in mind it's not good practice to have <ul> as a child of another <ul> - you can validate here: http://validator.w3.org/). Remove the inline styles, you'll deal with A LOT of headaches later if you write you CSS as you have. Set classnames for the bits you want extra space for (you can edit the {{20px}} below for how much space you want (or if you want left/right margins, you can edit the whole rule).
<style>
.title {
margin-left: 20px;
}
.top-list {
padding-top: 15px;
}
.top-list .spacer-top {
margin-top: {{20px}};
}
.top-list > li > ul {
margin-left: 30px;
}
</style>
<ul class="top-list">
<li class="title">First Services</li>
<li class="spacer-top">
<ul>
<li>get1</li>
</ul>
</li>
<li>
<ul>
<li>get2</li>
</ul>
</li>
<li>
<ul>
<li>get3</li>
</ul>
</li>
<li>
<ul>
<li>get4</li>
</ul>
</li>
<li>
<ul>
<li>get5</li>
</ul>
</li>
<li class="title" class="spacer-top">Second Services</li>
<li class="spacer-top">
<ul>
<li>get6</li>
</ul>
</li>
<li>
<ul>
<li>get7</li>
</ul>
</li>
<li>
<ul>
<li>get8</li>
</ul>
</li>
<li>
<ul>
<li>get9</li>
</ul>
</li>
<li>
<ul>
<li>get10</li>
</ul>
</li>
<li>
<ul>
<li>get11</li>
</ul>
</li>
<li>
<ul>
<li>get12</li>
</ul>
</li>
<li>
<ul>
<li>get13 </li>
</ul>
</li>
<li class="title spacer-top">Workflows</li>
<li class="spacer-top">
<ul>
<li>Workflow for someone </li>
</ul>
</li>
</ul>

Navigation system goes a little weird when resizing browser

I am having a little problem with the navigation list items going a little below the top-bar when I resize the browser. When I remove the image it seems to be working perfectly fine on all screen resolutions but inserting the logo has had an affect on this. Is there any way I can solve this. Can't seem to find out what the problem is.
HTML:
<!-- HEADER START -->
<div id="header">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<a href="index.html"><img src="img/flogo.svg" class="logo" alt="Logo">
Sharp <span>Media </span>
</a>
</h1>
</li>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
<li>Home</li>
<ul class="dropdown">
</ul>
</li>
<li class="divider"></li>
<li>FAQs</li>
<li class="divider"></li>
<li class="has-dropdown">
<li>Contact Us</li>
<ul class="dropdown">
<li class="divider"></li>
</ul>
</li>
</ul>
</section>
</nav>

Why do I get validation Errors (xhtml 1.0)

<div id="leftNav">
<ul id="mainmenu">
<li>Home</li>
<li>News</li>
<li>Media
<ul class="submenu">
<li>Videos</li>
<li>Gallery</li>
</ul>
<li>Contact
<ul class="submenu">
<li>Email</li>
<li>Phone</li>
<li>Location</li>
</ul>
<li>About</li>
</ul>
</div>
This code is perfect for my vertical drop down menu. however code validation hates it?
my results are here for validation, take a look please.
document type does not allow element "li" here; missing one of "ul",
"ol", "menu", "dir" start-tag end tag for "li" omitted, but OMITTAG
NO was specified
Error/Warning Type Count Total errors: 4 Total warnings: 1 Total
nesting errors: 0 Total messages: 0

You forgot to close each principal <li> elements. When you close your inner <ul> list you have to close the <li> element which correspond, to pass to the next item of the main list. This portion will be (x)HTML valid:
<div id="leftNav">
<ul id="mainmenu">
<li>Home</li>
<li>News</li>
<li>Media
<ul class="submenu">
<li>Videos</li>
<li>Gallery</li>
</ul></li>
<li>Contact
<ul class="submenu">
<li>Email</li>
<li>Phone</li>
<li>Location</li>
</ul></li>
<li>About</li>
</ul>
</div>

your missing some closing </li>'s. Below is a corrected version:
<div id="leftNav">
<ul id="mainmenu">
<li>Home</li>
<li>News</li>
<li>Media
<ul class="submenu">
<li>Videos</li>
<li>Gallery</li>
</ul>
</li>
<li>Contact
<ul class="submenu">
<li>Email</li>
<li>Phone</li>
<li>Location</li>
</ul>
</li>
<li>About</li>
</ul>
</div>

Try this:
<div id="leftNav">
<ul id="mainmenu">
<li>Home</li>
<li>News</li>
<li>Media
<ul class="submenu">
<li>Videos</li>
<li>Gallery</li>
</ul></li> <!-- here -->
<li>Contact
<ul class="submenu">
<li>Email</li>
<li>Phone</li>
<li>Location</li>
</ul></li> <!-- here -->
<li>About</li>
</ul>
</div>
You just have to close the li-tags after a nested ul-element.

force link to go to top of page

i have a site with multiple pages inside a single index.html.
the menu elements call for these pages using a path "#!/..."
<nav class="menu">
<ul id="menu">
<li id="item1"><span></span><a "javascript:void(0)" href="#!/">home</a></li>
<li id="item2"><span></span>about us</li>
<li id="item3"><span></span>what we do</li>
<li id="item4"><span></span>our work</li>
<li id="item5"><span></span>links</li>
<li id="item6"><span></span><span></span>opportunity alert</li>
<li id="item7"><span></span>contact us</li>
</ul>
</nav>
This seems to work okay except when you scroll down the page, then click another link, then click the link to the previous page you scrolled down on. This returns you to where you were scrolled down previously. I need it to return you to the top of each page when you click on any page link.

Just take out the pound sign:
<nav class="menu">
<ul id="menu">
<li id="item1"><span></span><a "javascript:void(0)" href="/">home</a></li>
<li id="item2"><span></span>about us</li>
<li id="item3"><span></span>what we do</li>
<li id="item4"><span></span>our work</li>
<li id="item5"><span></span>links</li>
<li id="item6"><span></span><span></span>opportunity alert</li>
<li id="item7"><span></span>contact us</li>
</ul>
</nav>

unordered list navigation html structure

I'm a novice and ran my code through an html validator.
Regarding my navigation I receive a message that reads: :Element ul not allowed as child of element ul in this context"
Here is the html structure:
<nav>
<div class="nav_container">
<ul class="navigation">
<ul class="logo">
<li><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></li>
</ul>
<ul class="subnav">
<li>home</li>
</ul>
<ul class="subnav">
<li>reclaimed wood</li>
<li>design</li>
</ul>
<ul class="subnav">
<li>flooring</li>
<li>paneling</li>
<li>beams</li>
</ul>
<ul class="subnav">
<li>shelving
</li><li>mantels</li>
</ul>
<ul class="subnav">
<li>news</li>
</ul>
<ul class="subnav">
<li>wood types</li>
<li>phrases</li>
</ul>
</ul>
</div>
</nav>
Whats wrong with it? It looks fine across browsers. Should I be concerned or take action?

A ul can not be a direct child of another ul, it needs to be contained within an li
<ul class="navigation">
<li>
<ul class="logo">
<li><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></li>
</ul>
</li>
<li>
<ul class="subnav">
<li>home</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>reclaimed wood</li>
<li>design</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>flooring</li>
<li>paneling</li>
<li>beams</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>shelving</li>
<li>mantels</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>news</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>wood types</li>
<li>phrases</li>
</ul>
</li>
</ul>
you could also give the menu some headings by adding it in the li before the child ul,

you must wrap each of the inner ul with an li
<ul class="navigation">
<li>
<ul>
<li>...</li>
</ul>
</li>
<li>
<ul>
<li>...</li>
</ul>
</li>
<li>
<ul>
<li>...</li>
</ul>
</li>
</ul>

Your structure is likely wrong. Logo is not a list or list-item. As well as list item that contains just another list is generally pointless.
Use heading element for logo (I usually use H1 for home page and H3 with link inside it for other pages):
<!-- for home page -->
<h1 id="logo">Company</h1>
<!-- for other pages -->
<h3 id="logo">Company</h3>
And make sure that your navigation has correct hierarchy like this:
<ul>
<li>Products
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Tablets</li>
</ul>
</li>
<li>About
<ul>
<li>History</li>
<li>Contacts</li>
</ul>
</li>
</ul>
In the example, each LI has its own link and subsections of section that the link represents, and thus the link text is heading for subsections' list.

You need to wrap
<ul class="navigation">
<ul class="logo">
as
<ul class="navigation">
<li>
<ul class="logo">
...
</ul>
</li>
and so on...