Showing posts with label menu. Show all posts
Showing posts with label menu. Show all posts

Tuesday 16 June 2015

Change content using select menu in a Bootstrap page with the help of jQuery

I recently delivered the solution to a stackoverflow question. The question was around using a select menu to display different content contained in divs using jQuery.
Below is the solution, but the only difference is that I've contained it in a Bootstrap page. The important bit are highlighted 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>Bootstrap select content</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <style>
    body
    {
      padding-top:2em;
    }
    </style>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="row">
      <div class="container">
        <div class="col-md-12">
          <select name="type" id="type" class="form-control">
            <option>Select some content</option>
            <option value="bar">Bar</option>
            <option value="restaurant">Restaurant</option>
            <option value="hotel">Hotel</option>
          </select>
          <hr />
          <div id="bar" class="type well">Bar</div>
          <div id="restaurant" class="type well">Restaurant</div>
          <div id="hotel" class="type well">Hotel</div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script>
    (function()
    {
      $('div.type').hide();
      $('#type').change(function()
      {
          $('div.type').hide();
          $('#'+$(this).val()).toggle();
      });
    })();
    </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:

  1. The name of the page which the navigation points to.
  2. 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>

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:

  1. Reads the file.
  2. Creates the menu tags from the file contents.
  3. 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>