Introduce semantic elements. Define a parametrised navigation partial
This assumes you have completed lab 05b:
You can use your solution, or download the version above.
This is the current version of the header and footer partials:
_header.ejs<div id="header">
<h1>Welcome to the App Bundle Store</h1>
</div>_footer.ejs<div id="footer">
<p> Contact us at : bundle@store.com, or visit us: <a href="directions.html"> directions </a></p>
</div>These elements have a clear role - and the html specification provides elements for these:
Here is a revised version of these partials using these element:
_header.ejs<header id="header">
<h1>Welcome to the App Bundle Store</h1>
</header>_footer.ejs<footer id="footer">
<p> Contact us at : bundle@store.com, or visit us: <a href="directions.html"> directions </a></p>
</footer>These changes to do effect the presentation in any way. They are intended to better reflect the html authors intent.
Here are 3 more of these 'semantic' elements:
We can use them in our html pages as follows:
<nav id="navigation">
<ul id="menu">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="apps.html">Apps</a></li>
<li><a href="directions.html">Directions</a></li>
</ul>
</nav>
<main id="maincontent">
<section id="primary">
<p>
This store brings you <em> great app bundles </em> week after week. We select the best power user apps from a
broad range of suppliers and combine them into great deals. These are the highest quality apps from the best
publishers, at great prices. </p>
<p>
Whether you are interested in gaming or graphics design, software development or media production - we have the
bundle for you. Each <a href="apps.html">app bundle</a> is designed to compliment the others, delivering you an
exciting take on a scene. </p>
<p class="guarantee">
Our guarantee: at the store, we're committed to providing you, with an exceptional quality and reliability. Every
application is checked in detail for stability, usability and inter-interoperability. If you are unhappy with any
individual app in a bundle we will refund you the full amount for the complete suite, no questions asked. </p>
<h2>Favourites</h2>
<p> These are some of our favourites </p>
<ul class="highlight">
<li>Hype by Tumult</li>
<li>Webstorm by Idea</li>
<li>Sublime, by sublimetext.com</li>
<li>Desktop Utility by Sweet Productions</li>
</ul>
<h2>Favourites</h2>
<p> We will be reviewing these favourites in the coming weeks, so please check in again to find out why these are
our favourite apps.</p>
<p> Why not come in and walk aroud the store? Directions are included below. </p>
</section>
<%- include('./partials/_secondary.ejs'); %>
</main><nav id="navigation">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="apps.html">Apps</a></li>
<li><a href="directions.html">Directions</a></li>
</ul>
</nav>
<main id="maincontent">
<section id="primary">
<h1>App Bundles</h1>
<h3>Freebie</h3>
<p>
<img src="images/ondesoft.jpg" alt="One Soft" class="medium-right-img"> Stacksocial just published its so called
Free Ondesoft Mac Tool Bundle, which contains 5 apps from Onesoft. The bundle is worth $146 will be probably
available only a couple of days so you’d better hurry up to get it. </p>
<hr>
<h3>Macware Business Bundle</h3>
<p>
Here comes the next bundle for march. This time its macware who publish a bundle. The so called macware Business
Bundle contains 6 apps at a price of only €29.99 instead of €199.94. So you can save around 84%. </p>
<hr>
<h3>Ultimate Bundle</h3>
<p>
<img src="images/ultimate.jpeg" alt="One Soft" class="medium-left-img"> This bundle is worth more than €400. So
for just a little bit more than $10, you can make your bargain if you want just one of these apps. of dollars. We
think, that the bundle will be online until the mid of October </p>
<hr>
</section>
<%- include('./partials/_secondary.ejs'); %>
</section><nav id="navigation">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="apps.html">Apps</a></li>
<li class="active"><a href="directions.html">Directions</a></li>
</ul>
</nav>
<main id="maincontent">
<section id="primary">
<h1>Directions</h1>
<h2>Our store is located :</h2>
<p>
Take the M9 / N9 towards Waterford. At the first roundabout on approach to Waterford, take the first exit
(signposted Waterford / Cork / Rosslare). At the next roundabout, take the third exit (signposted N25 / Cork /
Waterford South). Proceed through the toll bridge (toll is €1.90 per car). Take the exit directly after the toll
bridge (signposted Waterford South/R710). </p>
<p>
At the top of the off-ramp, go left at the small roundabout, then straight through two larger roundabouts
(signposted R710/City Centre/Tramore). At the next roundabout ( retail park on your left), take the first exit
(signposted City Centre). Proceed down the Cork Road for approx 2km and the main entrance to WIT’s main campus is
on the left. The College Street Campus is a further 2km towards the city centre on the left. </p>
<hr>
</section>
<%- include('./partials/_secondary.ejs'); %>
</main>Look carefully at the above, noting the use of <main>, <nav> & <section> elements.
These two elements are a bit more subtle:
The sidebar partial represents an appropriate use of the <aisde> eiement:
_secondary.ejs<aside id="secondary">
<h1>Weekly Deals</h1>
<h2 class="special">Business Bundle</h2>
<p>
<img src="images/business.png" alt="Business Bundle" class="medium-right-img"> Here comes the next bundle for march.
This time it's macware who publish a bundle. The so called macware Business Bundle contains 6 apps at a price of
only €29.99 instead of €199.94. So you can save around 84%. </p>
<h2 class="special">Insanity Deal</h2>
<p>
<img src="images/insanity.jpg" alt="Insanity Deal" class="medium-left-img"> With the new €5 Insanity Deals from
Bundlehunt you receive every day a highly reduced app for €5 only with savings up to 75%. Not a real bundle but, as
there are multiple apps for only €5 each, one new per day, for the days to come. </p>
</aside>We can revisit the main pages, replacing the <section> with the <article> element:
<nav id="navigation">
<ul id="menu">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="apps.html">Apps</a></li>
<li><a href="directions.html">Directions</a></li>
</ul>
</nav>
<main id="maincontent">
<article id="primary">
<p>
This store brings you <em> great app bundles </em> week after week. We select the best power user apps from a
broad range of suppliers and combine them into great deals. These are the highest quality apps from the best
publishers, at great prices. </p>
<p>
Whether you are interested in gaming or graphics design, software development or media production - we have the
bundle for you. Each <a href="apps.html">app bundle</a> is designed to compliment the others, delivering you an
exciting take on a scene. </p>
<p class="guarantee">
Our guarantee: at the store, we're committed to providing you, with an exceptional quality and reliability. Every
application is checked in detail for stability, usability and inter-interoperability. If you are unhappy with any
individual app in a bundle we will refund you the full amount for the complete suite, no questions asked. </p>
<h2>Favourites</h2>
<p> These are some of our favourites </p>
<ul class="highlight">
<li>Hype by Tumult</li>
<li>Webstorm by Idea</li>
<li>Sublime, by sublimetext.com</li>
<li>Desktop Utility by Sweet Productions</li>
</ul>
<h2>Favourites</h2>
<p> We will be reviewing these favourites in the coming weeks, so please check in again to find out why these are
our favourite apps.</p>
<p> Why not come in and walk aroud the store? Directions are included below. </p>
</article>
<%- include('./partials/_secondary.ejs'); %>
</main><nav id="navigation">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="apps.html">Apps</a></li>
<li><a href="directions.html">Directions</a></li>
</ul>
</nav>
<main id="maincontent">
<article id="primary">
<h1>App Bundles</h1>
<h3>Freebie</h3>
<p>
<img src="images/ondesoft.jpg" alt="One Soft" class="medium-right-img"> Stacksocial just published its so called
Free Ondesoft Mac Tool Bundle, which contains 5 apps from Onesoft. The bundle is worth $146 will be probably
available only a couple of days so you’d better hurry up to get it. </p>
<hr>
<h3>Macware Business Bundle</h3>
<p>
Here comes the next bundle for march. This time its macware who publish a bundle. The so called macware Business
Bundle contains 6 apps at a price of only €29.99 instead of €199.94. So you can save around 84%. </p>
<hr>
<h3>Ultimate Bundle</h3>
<p>
<img src="images/ultimate.jpeg" alt="One Soft" class="medium-left-img"> This bundle is worth more than €400. So
for just a little bit more than $10, you can make your bargain if you want just one of these apps. of dollars. We
think, that the bundle will be online until the mid of October </p>
<hr>
</article>
<%- include('./partials/_secondary.ejs'); %>
</section><nav id="navigation">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="apps.html">Apps</a></li>
<li class="active"><a href="directions.html">Directions</a></li>
</ul>
</nav>
<main id="maincontent">
<article id="primary">
<h1>Directions</h1>
<h2>Our store is located :</h2>
<p>
Take the M9 / N9 towards Waterford. At the first roundabout on approach to Waterford, take the first exit
(signposted Waterford / Cork / Rosslare). At the next roundabout, take the third exit (signposted N25 / Cork /
Waterford South). Proceed through the toll bridge (toll is €1.90 per car). Take the exit directly after the toll
bridge (signposted Waterford South/R710). </p>
<p>
At the top of the off-ramp, go left at the small roundabout, then straight through two larger roundabouts
(signposted R710/City Centre/Tramore). At the next roundabout ( retail park on your left), take the first exit
(signposted City Centre). Proceed down the Cork Road for approx 2km and the main entrance to WIT’s main campus is
on the left. The College Street Campus is a further 2km towards the city centre on the left. </p>
<hr>
</article>
<%- include('./partials/_secondary.ejs'); %>
</main>Again, look carefully at each of the above and note the differences.
The <nav> section in our page is currently duplicated on each of the main pages:
<nav id="navigation">
<ul id="menu">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="apps.html">Apps</a></li>
<li><a href="directions.html">Directions</a></li>
</ul>
</nav>
...
...<nav id="navigation">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="apps.html">Apps</a></li>
<li><a href="directions.html">Directions</a></li>
</ul>
</nav>
...
...<nav id="navigation">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="apps.html">Apps</a></li>
<li class="active"><a href="directions.html">Directions</a></li>
</ul>
</nav>
...
...Notice, however, each version has a small difference, the class=active is specific to each page.
We would like to find a way of supporting a single nav partial, that can somehow be 'paramaterised' with the correct active element.
The first step, is to create a new _nav.ejs partial the partials folder:
<nav id="navigation">
<ul id="menu">
<li id="home"><a href="index.html">Home</a></li>
<li id="apps"><a href="apps.html">Apps</a></li>
<li id="directions"><a href="directions.html">Directions</a></li>
</ul>
</nav>Notice that this version has a significant change - each <li> has an id:
<li id="home"> ...
<li id="apps"> ...
<li id="directions"> ...This is a significant change - and will allow us to dynamically select between these elements.
Replace the <nav> element on all pages now with an include of this partial:
<%- include('./partials/_nav.ejs'); %><%- include('./partials/_nav.ejs'); %><%- include('./partials/_nav.ejs'); %>Make these changes now. The navigation mechanism should still work, but the current page will NOT be highlighted.
_nav.ejsThis is an extended version of the _nav.ejs partial:
_nav.ejs<nav id="navigation">
<ul id="menu">
<li id="home"><a href="index.html">Home</a></li>
<li id="apps"><a href="apps.html">Apps</a></li>
<li id="directions"><a href="directions.html">Directions</a></li>
</ul>
</nav>
<script>
document.querySelector("#<%= id %>").classList.add("active")
</script>The section itself is the same, but an additional <script> element has been added. We have not covered javascript and its role in any detail yet, so this extension is a little mysterious. It is doing 2 things:
The id to set will need to be passed to the partial as a parameter from each of the pages that includes it.
Here is the revised includes:
<%- include('./partials/_nav.ejs', {id : "home"}); %><%- include('./partials/_nav.ejs', {id : "apps"}); %><%- include('./partials/_nav.ejs', {id : "directions"}); %>Notice how we are passing a different id in each case.
Try this now, and verify that the navigation mechanism is highlighted the current page again.
Don't worry about how the <script> tag is working - this is something to be considered in a future module!
You might like to incorporate the nav technique introduce here into your assignment.