Mick Redman: navigation

Showing posts with label navigation. Show all posts

Wednesday 10 April 2019

Vanilla JavaScript Grid navigation

I have created a Vanilla JavaScript Grid navigation. This has been built using https://github.com/guitarbeerchocolate/vanilla-js-component and resides at https://github.com/guitarbeerchocolate/vanilla-js-grid-navigation
It employs ES6, BEM and SASS.

Wednesday 25 April 2018

CSS Grid Layout responsive navigation

It's possible there is a better way of doing this. There are so many ways to do things using CSS Grid Layout. Anyway, here goes.
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS Grid Layout navigation</title>
<style>
body {
font-family: sans-serif;
}

#container {
max-width: 46em;
margin: 0 auto;
}

.grid {
display: grid;
}

.single {
grid-template-columns: auto;
}

.five-columns {
grid-template-columns: auto auto auto auto auto;
}

#menu {
display: none;
}

nav {
display: block;
width: 100.05%;
}

@media (max-width: 640px) {
.grid {
grid-template-columns: auto;
}
.five-columns a {
display: block;
}
}
</style>
</head>

<body onload="handleresize()">
<div id="container">
<header class="grid single">This is a banner</header>
<a href="#" class="grid single" id="menu" onclick="toggleMenu()">Menu</a>
<nav class="grid five-columns">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Contact</a>
</nav>
<main class="grid single">
<p>Quis fabulas ita quorum dolore. Fore ab nostrud ubi quem aut esse nam appellat, arbitror o litteris, quo quamquam iis laboris. Se elit cernantur, veniam tractavissent arbitror culpa singulis.Tempor id laboris. Minim occaecat ita culpa export, arbitror
ex eram, export ita constias hic sint ex eram admodum et praesentibus in labore ad probant a minim nam id laboris efflorescere, multos incididunt do exercitation do laborum culpa illum nescius enim. Non elit aliqua quis expetendis. Consequat legam
nulla cernantur malis nam e elit irure aut constias, de magna constias mentitum an senserit ea commodo, eu aliqua esse tempor appellat, senserit multos offendit, quo fugiat est duis, commodo aute irure vidisse nisi.</p>
</main>
<footer class="grid single">This is the footer</footer>
</div>
<script>
window.addEventListener("resize", handleresize);

function handleresize() {
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var nav = document.getElementsByTagName('nav')[0];
var menu = document.getElementById('menu');
if (width < 640) {
nav.style.display = 'none';
menu.style.display = 'block';
} else {
nav.setAttribute('style', 'visibility:visible');
menu.style.display = 'none';
}
}

function toggleMenu() {
var nav = document.getElementsByTagName('nav')[0];
if (nav.style.display === 'block') {
nav.style.display = 'none';
} else {
nav.style.display = 'block';
}
}
</script>
</body>

</html>

Wednesday 23 March 2016

Dynamically make items active in Twitter Bootstrap navigation using jQuery

Here, I have created a jQuery plugin. It takes as its parameter the elements containing navigation items from a Twitter Bootstrap page. The plugin then matches the page URL with a navigation item and makes it active.
Find the code here.

Friday 20 February 2015

Match the current URL with the responding navigation items of a Twitter Bootstrap site

So, you've got a Twitter Bootstrap website and you want the navigation items to become active when you're in the corresponding page. Below I wrote the jQuery plugin to do just that.
First the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery navigation plugin for bootstrap</title>
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
Menu
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-education" aria-hidden="true"></span></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="irrigation.html">Irrigation</a></li>
<li><a href="pump.html">Pump</a></li>
</ul>
</div>
</div>
</nav>
<script src="jquery/1.11.2/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<script src="js/matchactive.plugin.js"></script>
<script>
(function()
{
$('ul.nav > li > a').matchactive();
}();
</script>
</body>
</html>

And now the matchactive.plugin.js
(function($)
{
$.fn.extend(
{
matchactive:function(getvar)
{
var pathArray = window.location.pathname.split( '/' );
var sn = pathArray[pathArray.length - 1];
var setOfAnchors = $(this);
$(setOfAnchors).each(function()
{
if($(this).attr('href') == sn)
{
$(this).parent().addClass('active');
}
});
}
});
})(jQuery);

Monday 8 December 2014

Dynamically activate navigation items in Bootstrap using my jQuery plugin

My challenge was to write a piece of jQuery which:

Takes note of the page path.
Compares it with the Bootstrap navigation.
Makes the navigation element 'active' to remind the users where they are in relation to the site.

First the HTML. Notice, that I have not set any navigation item as active. The plugin will do this. The plugin call is in red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Activate Navigation Entry</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">



</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="action.php">Action</a></li>
<li><a href="anotheraction.php">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="container">
<div class="col-md-12">
<h1>Home</h1>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="activatenav.plugin.js"></script>
<script>
(function()
{
$(document).activatenav(
{
toplevel:'ul.nav.navbar-nav > li > a',
dropdown:'ul.nav.navbar-nav > li.dropdown > ul.dropdown-menu > li > a'
});
})();
</script>
</body>
</html>
Next the jQuery plugin named 'activatenav.plugin.js'.
First calculate the end of the path. If there is no name, it must be the home page, so set that as active.
I also check if the current page is from the drop down menu. If so, set both the drop down heading and the corresponding navigation item as 'active'.
(function($)
{
$.fn.extend(
{
activatenav:function(options)
{
var pname = window.location.pathname;
var pArr = pname.split('/');
var defaults =
{
toplevel:'',
dropdown:''
};
options = $.extend(defaults, options);
if(options.toplevel)
{
handled = $(this).handleTopLevel(options.toplevel, pArr[pArr.length-1]);
if(handled == false)
{
$(this).handleDropdown(options.dropdown, pArr[pArr.length-1]);
}
}
}
});

$.fn.handleTopLevel = function(str, pth)
{
var hd = false;
if(!pth)
{
$(str).first().parent().addClass('active');
}
else
{
$(str).each(function()
{
if($(this).attr('href') == pth)
{
$(this).parent().addClass('active');
hd = true;
}
});
}
return hd;
};

$.fn.handleDropdown = function(str, pth)
{
$(str).each(function()
{
if($(this).attr('href') == pth)
{
$(this).parent().addClass('active');
$(this).closest('li.dropdown').addClass('active');
}
});
};
})(jQuery);

Monday 17 February 2014

Twitter Bootstrap single page website without the need for yet another plugin

The code below creates a page using Twitter Bootstrap. It contains one of those fashionable single page navigations. I needed to create one for a site I was developing for a client recently. When I started to look into it all the examples seemed to use a plugin. For performance purposes, I didn't want to use another plugin. Especially since jQuery already comes with the 'animate' class. See code below for solution.

<!DOCTYPE html>
<html>
<head>
<title>Single page website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
#about, #contact
{
padding-top:4em;
}
#contact
{
margin-bottom:40em;
}
</style>



</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li ><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>

<div id="home">
<div class="row">
<div class="container">
<article class="col-md-4">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>
<p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
</article>
<article class="col-md-4">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>
<p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
</article>
<article class="col-md-4">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>
<p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
</article>
</div>
</div>
</div>

<div id="about">
<div class="row">
<div class="container">
<figure class="col-md-4">
<img src="http://lorempixel.com/400/200/sports" alt="sports" class="img-responsive" />
<figcaption>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</figcaption>
</figure>
<figure class="col-md-4">
<img src="http://lorempixel.com/400/200/sports" alt="sports" class="img-responsive" />
<figcaption>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</figcaption>
</figure>
<figure class="col-md-4">
<img src="http://lorempixel.com/400/200/sports" alt="sports" class="img-responsive" />
<figcaption>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</figcaption>
</figure>
</div>
</div>
</div>

<div id="contact">
<div class="row">
<div class="container">
<article class="col-md-6">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>
<p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
</article>
<aside class="col-md-6">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>
<p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
</aside>
</div>
</div>
</div>
<footer class="navbar-default navbar-fixed-bottom">
<div class="container">
<a href="#home">Back to top</a>
</div>
</footer>

<script src="https://code.jquery.com/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>
<script>
(function()
{
$('.nav a, footer a').click(function()
{
var target = $(this).attr('href');
var targetLoc = $(target).offset().top;
$('html, body').stop().animate(
{
scrollTop:targetLoc,
easing:'swing'
}, 1000);
return false;
});
})();
</script>
</body>
</html>

Monday 17 June 2013

Catching browser buttons

I was recently putting together an application. My test user did something I wasn't expecting. Rather than using the buttons within the application, he went for the browser buttons. It prompted me to provide a warning for the user that the application wouldn't work so well if he did this. See code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test page</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<a href="index2.php">Go to page 2</a>
<script>
(function()
{
catchBrowser = true;

$('a').click(function()
{
catchBrowser = false;
});

$(window).bind('beforeunload', function()
{
if(catchBrowser == true)
{
return 'Please use only the buttons within the application pages.';
}
else
{
return;
}
});
})();
</script>
</body>
</html>

Friday 17 June 2011

Using PHP to create a dynamic page navigation based on filenames

Here is the problem. You create a bunch of pages. You want to highlight the current page within the navigation. You don't want to manually change the navigation elements to each page.

See demo.

In the example below I create an associative array which contains two elements:

The name of the page which the navigation points to.
The name which should appear in the navigation.

I then grab the filename of the of the current page in the browser.
I then traverse the associative array, each time comparing the filename against the current file shown in the browser, each time creating an anchor using the values.

If array filename and current page filename are the same, then I add a CSS ID to the anchor tag.

You will need to write a little CSS to highlight the current page anchor such as:

nav a#activeMenuItem
{
background:#EEEEEE;
}

But other than that, it works like a charm. Have fun!

<nav>
<?php
$navArray = array('index.php'=>'home', 'services.php'=>'services','portfolio.php'=>'portfolio','contact.php'=>'contact');
$fileName = substr(strrchr($_SERVER['SCRIPT_NAME'],47),1);
foreach($navArray as $fname => $linktitle)
{
echo '<a href="'.$fname.'"';
if($fname==$fileName)
{
echo ' id="activeMenuItem"';
}
echo '>'.$linktitle.'</a>';
}
?>
</nav>

Tuesday 17 May 2011

Prettier navigation blocks Horizontal

This is an effect used by designers to add a little texture to navigation block.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pretty nav blocks</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:sans-serif;
}
nav a, nav a:link, nav a:active, nav a:hover, nav a:visited
{
color:#FFFFFF;
}
nav a
{
display:block;
float:left;
width:4em;
height:1em;
text-decoration:none;
background:#222222 url(images/buttonbg.png) repeat-x;
padding:1em;
border-right:0.08em solid #FFFFFF;
border-left:0.08em solid #CCCCCC;
text-align:center;
}
nav a:hover
{
background:#666666 url(images/buttonbg.png) repeat-x;
border-left:0.1em solid #CCCCCC;
}
</style>
</head>
<body>
<section id="mainContent">
<nav>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
</nav>
</section>
</body>
</html>

Friday 4 March 2011

Prettier navigation blocks Vertical

This is an effect used by designers to add a little texture to navigation block. It works horizontally just as well if you use border-left and border-right instead of border-top and border-bottom.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pretty nav blocks</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:sans-serif;
}
nav a, nav a:link, nav a:active, nav a:hover, nav a:visited
{
color:#FFFFFF;
}
nav a
{
display:block;
width:4em;
height:1em;
text-decoration:none;
background:#222222 url(images/buttonbg.png) repeat-x;
padding:1em;
border-top:0.08em solid #FFFFFF;
border-bottom:0.08em solid #CCCCCC;
text-align:center;
}
nav a:hover
{
background:#666666 url(images/buttonbg.png) repeat-x;
border-bottom:0.1em solid #CCCCCC;
}
</style>
</head>
<body>
<section id="mainContent">
<nav>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
</nav>
</section>
</body>
</html>

Thursday 16 September 2010

Simple layout #7

Another commonly used layout. This time using a graphic as a sort of underline. Also, a navigation bar which I've seen on many designer websites.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #7</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
color:#CCCCCC;
background:#000000 url(http://farm5.static.flickr.com/4150/4992675995_fb299546f0_b.jpg) no-repeat left bottom;
}
#nav, #content, #footer
{
width:920px;
margin-left:20px;
}
#nav, #footer
{
height:100px;
}
#nav a
{
display:block;
float:left;
width:100px;
color:#CCCCCC;
text-decoration:none;
border-right:1px solid #CCCCCC;
padding-right:40px;
padding-left:8px;
padding-bottom:60px;
margin-left:-4px;
}
#nav a:hover
{
background:#A3A3A3;
color:#FFFFFF;
}
#content
{
min-height:360px;
}
h1
{
font-family:'Yanone Kaffeesatz', arial, serif;
font-size:3em;
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">home</a>
<a href="#">products</a>
<a href="#">services</a>
<a href="#">about</a>
</div>
<div id="content">
<h1>A Pretty Big Header</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="footer"></div>
</body>
</html>

Wednesday 15 September 2010

Drop down menu using jQuery

This is an adaptation on some work done by Myles Angell. I've just simplified the CSS so that you can do more with it. The original is at http://be.twixt.us/jquery/suckerFish.php

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop Down Menu</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-family:Sans-serif;
}
#container
{
margin:0 auto;
width:800px;
}
.nav, .nav ul, .nav ul
{
list-style: none;
}
.nav, .nav li
{
position: relative;
}
.nav
{
z-index: 100;
}
.nav ul
{
width:100px;
position: absolute;
top: -999em;
left: -1px;
}
.nav ul a
{
width: 80px;
}
.nav li
{
float: left;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
height:20px;
display: block;
padding:10px;
text-decoration: none;
}
.nav li a:hover, #navigation li:hover a, #navigation li.sfHover a, #navigation li:hover ul a:hover, #navigation li.sfHover ul a:hover, .nav ul a:hover
{
background: #CCCCCC;
color: #000000;
}
#navigation li:hover ul a, #navigation li.sfHover ul a, .nav ul, .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
background: #000000;
color: #FFFFFF;
}
.nav li:hover ul, .nav li.sfHover ul
{
top:40px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("#navigation li").hover(
function()
{
$("ul", this).fadeIn("fast");
},
function()
{
}
);
if (document.all)
{
$("#navigation li").hoverClass ("sfHover");
}
});

$.fn.hoverClass = function(c)
{
return this.each(function()
{
$(this).hover(
function()
{
$(this).addClass(c);
},
function()
{
$(this).removeClass(c);
}
);
});
};
</script>
</head>
<body>
<div id="container">
<ul id="navigation" class="nav">
<li><a href="#item1">item 1</a>
<ul>
<li><a href="#item1.1">item 1.1</a></li>
<li><a href="#item1.2">item 1.2</a></li>
<li><a href="#item1.3">item 1.3</a></li>
<li><a href="#item1.4">item 1.4</a></li>
</ul>
</li>
<li><a href="#item2">item 2</a>
<ul>
<li><a href="#item2.1">item 2.1</a></li>
<li><a href="#item2.2">item 2.2</a></li>
</ul>
</li>
<li><a href="#item3">item 3</a>
<ul>
<li><a href="#item3.1">item 3.1</a></li>
<li><a href="#item3.2">item 3.2</a></li>
</ul>
</li>
<li><a href="#item4">item 4</a>
<ul>
<li><a href="#item4.1">item 4.1</a></li>
<li><a href="#item4.2">item 4.2</a></li>
<li><a href="#item4.3">item 4.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Thursday 2 September 2010

Overlapping logo

I'm often seeing websites where a logo overlaps the navigation bar and sticks out either side. Here is how it's done. You'll need to add your own image in place of mine because flickr didn't seem to accept the transparency behind my silver sticker logo.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overlapping logo</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
margin: 0 auto;
width:920px;
border:1px solid #CCCCCC;
}
h1
{
margin-left:120px;
color:#FFFFFF;
}
#nav
{
text-align: center;
background:#000000;
height:40px;
width:100%;
}
#nav a
{
width: 100px;
   height:28px;
   padding-top:8px;
   padding-bottom:4px;
   padding-left:30px;
   padding-right:30px;
display: inline-block;
letter-spacing: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
color:#FFFFFF;
text-decoration:none;
}
#nav a:hover
{
background:#FF0000;
}
#nav img
{
float:right;
position:relative;
top:-30px;
right:20px;
}
#content
{
min-height:400px;
}
</style>
</head>
<body>
<br /><br />
<div id="container">
<h1>This is a sticky footer example</h1>
<div id="nav">
<img src="images/silversticker.png" alt="silver sticker" />
<a href="#">First item</a>
<a href="#">Second item</a>
<a href="#">Third item</a>
</div>
<div id="content">
</div>
</div>
</body>
</html>

Friday 13 August 2010

Automatic menu selection using PHP

Suppose I have a website. In this case a PHP driven HTML5 website, although what I'm about to explain doesn't really require HTML5 and can be easily adapted.

See demo.

I have a menu. I have a text file called menu.txt which contains my menu items like this:

index.php,home
index2.php,Page 2
index3.php,Page 3

And what I want to do is call a PHP script which:

Reads the file.
Creates the menu tags from the file contents.
Automatically selects the page I'm looking at as the selected item in the menu.

I can then apply CSS as I like to the menu appearance using a different colour for the selected item.

Here is how I do it. First place the include 'navigation.php'; in your page script where you want the navigation to appear.
This is what navigation.php looks like:

<nav>
<ul>
<?php
/* get the contents of menu.txt */
$fileArr = file('includes/menu.txt');
/* get the name of the PHP file referred to in the URL */
$fname = basename($_SERVER['REQUEST_URI']);
/* if there isn't a PHP file extension in the URL, it must be root. Therefore call it index.php */
if(substr($fname,-4) <> ".php")
{
$fname = "index.php";
}
/* create the menu from the lines in menu.txt */
foreach ($fileArr as $line)
{
$menuitems = explode(",", $line);
echo '<li><a href="'.$menuitems[0].'" ';
/* Check the current pathname in menu.txt with the one in the current URL */
if($menuitems[0] == $fname)
{
/* If they are the same add the menuSelected class to the link */
echo 'class="menuSelected"';
}
echo '>'.$menuitems[1].'</a></li>';
}
?>
</ul>
</nav>

Hey presto! Have fun.

Simple vertical navigation

How many times have you wanted to start a website using a simple left hand vertical left hand navigation and then just build on it. Below is a template for doing just that. This time I have added a few comments even though the code is pretty self explanatory. To make this work on your own setup, you will also need to create subPage1.html, subPage2.html and subPage3.html, but other than that, you're away. You should need to download jQuery because it is being referenced from Google. There is a little CSS, just to, layout the tabs and show how the hover works.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabbed Navigation</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
/* a holder for the entire page centred in the browser window */
#subSystem
{
margin:0 auto;
width:480px;
}
/* a container for the navigation with a border around 3 of the sides */
#subNav
{
float:left;
width:88px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
}
/* properties of each menu item to make it look like a block of centred text */
#subNav a.subMenu
{
display:block;
text-decoration: none;
text-align:center;
width:80px;
height:40px;
padding-top:16px;
padding-left:4px;
padding-right:4px;
color:#000000;
}
/* the changes in appearance of a menu item when someone hovers over it */
#subNav a.subMenu:hover
{
background:#A3A3A3;
color:#FFFFFF;
}
/* the changes in appearance of a menu item when someone has selected it */
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
/* a container for the page content */
#subContent
{
float:left;
width:380px;
min-height:380px;
height:380px;
border:1px solid #CCCCCC;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
/* when a menu item is clicked remove any items which were previously selected.
Change the property of the item clicked to selected.
Put whatever the hyperlink points to within the content container. */
$("a.subMenu").click(function()
{
$("a.subMenu").removeClass("menuSelected");
$(this).addClass("menuSelected");
$("#subContent").load($(this).attr("href"));
return false;
});
});
</script>
</head>
<body>
<div id="subSystem">
<div id="subNav">
<a href="subPage1.html" class="subMenu menuSelected">First</a>
<a href="subPage2.html" class="subMenu">Second</a>
<a href="subPage3.html" class="subMenu">Third</a>
</div>
<div id="subContent">
Hello World!
</div>
</div>
</body>
</html>

Thursday 12 August 2010

Simple tab navigation using jQuery

Below is the code for a very simple jQuery tabbed navigation. To make this work on your own setup, you will also need to create subPage1.html, subPage2.html and subPage3.html, but other than that, you're away. You should need to download jQuery because it is being referenced from Google. There is a little CSS, just to, layout the tabs and show how the hover works.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabbed Navigation</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#subSystem
{
margin:0 auto;
width:400px;
}
#subNav a.subMenu
{
display:block;
text-decoration: none;
float:left;
text-align:center;
width:80px;
height:40px;
padding:4px;
border-top:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
color:#000000;
}
#subNav a.subMenu:hover
{
background:#A3A3A3;
color:#FFFFFF;
}
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
#subContent
{
clear:left;
min-height:400px;
height:400px;
border:1px solid #CCCCCC;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("a.subMenu").click(function()
{
$("a.subMenu").removeClass("menuSelected");
$(this).addClass("menuSelected");
$("#subContent").load($(this).attr("href"));
return false;
});
});
</script>
</head>
<body>
<div id="subSystem">
<div id="subNav">
<a href="subPage1.html" class="subMenu menuSelected">First</a>
<a href="subPage2.html" class="subMenu">Second</a>
<a href="subPage3.html" class="subMenu">Third</a>
</div>
<div id="subContent">
Hello World!
</div>
</div>
</body>
</html>