Creating Panel Menu with JQuery

Today, I am gonna show you how to create a very useful menu panel. Take a look at the demo of that first.

Well, this type of menu turns out to be very useful if you have a lot of links but you can’t show them in a drop down menu which may get very long. Other than that, it can also be used to allow quick form submissions or showing some piece of text. Basically, it is a div you can put just about anything in it. Let’s move on to creating this menu panel.

HTML

First of all, we create links which when hovered will show the associated panel.

  <div id="container">
    <ul id="menu">
      <li><a href="#" rel="panel_1">Link One</a></li>
      <li><a href="#" rel="panel_2">Link Two</a></li>
      <li><a href="#" rel="panel_3">Link Three</a></li>
    </ul>
  </div>

I will be using links’ rel attribute to refer to corresponding div element which is actually our panel element. Here is the html markup for our panel:

<div id="panel_1">
    <div class="left">
        <!-- The content for this panel goes here -->
    </div>
</div>

As can be seen, this panel has id panel_1 which is the same as rel value of the link shown above. That is how other two panels should be constructed.

CSS

First of all, we make sure that our menu is centered on the screen, so this is how we center the container div:

#container
{
  margin:0px auto;
  width:350px;
}

We make sure that there are no bullets there on the lists:

ul#menu
{
  list-style:none;
}

By default, list items are placed vertically because they are block-level elements, so we make them inline using this CSS so that they appear side by side with one pixel gap:

ul#menu li
{
  display:inline;
  background:#0099CC;
  float:left;
  margin-right:1px;
}

Then we make menu links as block-level elements because only after that we will be able to apply a width to them:

ul#menu li a
{
  color:#ffffff;
  font-weight:bold;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  padding:5px;
}

Here is the CSS for any panel containing text. We will need to apply class text to any panel containing only text.

.text
{
  width:300px;
  text-align:justify;
  background:#333333;
  color:#CCCCCC;
  padding:15px;
}

Here is the CSS for any other panel:

div.left
{
  width:130px;
}

div.left ul
{
  list-style:none;
  margin-left:0px;
  padding:15px;
  background:#333333;
  color:#FFFFFF;
}

So for panels containing text, we will be using class text and for rest of the panels we will be using class left.

JQuery

First of all we create a global variable which will be equalized to opened panel later, so that we could use that variable later to operate on that opened panel like closing it.

<script type="text/javascript">

  var opened_one = null;

</script>

Now as mostly what we do, we use JQuery’s ready method to run our code. Our code will be run as soon as DOM becomes ready:

<script type="text/javascript">

  var opened_one = null;

  $(function(){
    // code here
  }

</script>

First of all we hide all panels using hide() method:

  // hide all panels first
  $('div[id*="panel"]').hide();

What it means is that hide all divs that have text panel anywhere in their id values. The *= means find given text anywhere in the provided attribute value.

To be able to actully position the panels right after the hovered links, we need to make them absolute positioned (I assume you have good understanding of CSS):

  // make the panels absolute positioned
  $('div[id*="panel"]').css('position', 'absolute');

Now we write the code for menu links which will be run when they are hovered upon using hover event:

  $('#menu a').hover(function(){
    // code here
  });

First we hide if there is a panel already open and get hovered link’s rel attribute value and store that in variable link_rel. We can get the attribute value using attr() method.

	// hide previously opened panel
	$(opened_one).hide();

	var link_rel = $(this).attr('rel');

Now we get the position of the hovered link (menu item) using offset() method and use that information to position the panels right after them using css() method of JQuery:

    //get the position of the hovered element
    var pos = $(this).offset();

   // get the panel near by hovered element now
    $('div#' + link_rel).css({
      'left': pos.left + 'px',
      'top': (pos.top + $(this).height() + 10) + 'px',
      'zIndex': '5000'
    });

As can be seen, we set the top of panel equal to that of hovered link plus its height plus 10 which we need because we have assigned in CSS with 5 pixels of padding. As per CSS box model, we need to calculate paddings for two sides thus equaling to 10. We also set the z-index of current panel to a larger value so that it appears over any other opened panel although possibility of this is less but we still want to make sure that it makes sense.

Then we show the corresponding panel using fadeIn() animation and once that it is opened/shown, we set the variable opened_one to this panel so that we could hide it later if another panel is to be opened.

    // finaly show the relevant hidden panel
    $('div#' + link_rel).fadeIn('slow');

   // this is currently opened
   opened_one = $('div#' + link_rel);

We want to hide the panel if the mouse moves away from its area using fadeOut():

    // hide it back when mouse arrow moves away
    $('div#' + link_rel).hover(function(){}, function(){
		$(this).fadeOut('slow');
    });

That’s all there is to it. Of couse explaining it takes more time and a lot of theory but if you think about it and practice, it should not be that hard to create this very useful menu panel using JQuery.

Download Code.

Creating CodeIgniter-Like User Guide Panel With JQuery

In this particular tutorial, I will show how to create CodeIgniter-Like User Guide Panel with the help of JQuery.  This panel is readily available on each user guide page of CodeIgniter which makes it very useful because you are able to browse through different topics which are always available and just a click away. Here are some of the most obvious benefits or uses of this panel:

• Contains a host of links or content
• Always available on the top
• Can be used for any content or even a form

The HTML Markup

First of all, we create a panel container div with id panel and then put all content inside it. We will use this id in CSS as well as JQuery to style and manipulate the panel respectively. The html markup for the panel looks like this:

	<div id="panel">
		<div style="padding:10px;">
			<div class="left">
				<div class="doc_heading">Basic Information</div>
				<ul>
					<li><a href="#">&rarr; Server Requirements</a></li>
					<li><a href="#">&rarr; License Agreement</a></li>
					<li><a href="#">&rarr; Credits</a></li>
				</ul>
			</div>
		</div>
	</div>

The div with class left is where each distinct section goes and then each section is followed by another div with id divider which is basically a vertical line separating each section.

The CSS
This is the CSS for the panel:

	.left
	{
	 	float:left;
	}
	.right
	{
	 	float:right;
	}
	.clear
	{
	 	clear:both;
	}
	.doc_heading
	{
		font-weight:bold;
		margin:10px 0px 5px 0px;
		font-size:12px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
	}
	body
	{
		margin: 0px auto;
		padding:0px;
	}
	div#panel
	{
		width:100%;
		height:400px;
		color:#FFFFFF;
		background:#666666;
		display:none;
		padding:0px;
	}
	div#btn
	{
		cursor:pointer;
		cursor:hand;
	}
	div#divider
	{
		background:url(images/dot.gif) repeat-y;
		height:350px;
		float:left;
		width:20px;
		margin-left:20px;
	}
	div#panel ul
	{
		list-style:none;
		margin:0px;
		padding:0px;
	}

	div#panel ul li a
	{
		color:#ffffff;
		font-weight:normal;
		text-decoration:none;
		font-size:11px;
		font-family:'verdana';
	}

	div#panel ul li a:hover
	{
		color:#cccccc;
	}

The JQuery
In the JQuery’s ready event which fires as soon as DOM becomes ready, we set the width of the panel so that it adjusts according to size of the browser window and also give appropriate width to the panel images based on the browser window size:

	$(function(){
		// set appropriate width of the slide panel
		setWidth();
	});

Here is the setWidth function:

	function setWidth()
	{
		// get main document width
		var dimension = getPageDimensions();
		var doc_width = dimension[0];
		var slide_button_width = 143;

		// let's find out how much width should be given to each
		// of the left and right bar (slide_panel_01.gif) of the slide panel.
		var diff = doc_width - slide_button_width;
		// now divide diff with 2 to get width for each bar
		var bar_width = diff / 2;

		// now apply width to each bar
		$("div#left_bar, div#right_bar").css("width", bar_width);
	}

Now comes the magic. The JQuery has amazing function by the name of slideToggle which can be used to toggle content with sliding animation style. This function automatically takes care of current state of the sliding element. We put this function in ready even too:

	$(function(){
		// set appropriate width of the slide panel
		setWidth();

		// slide the panel when slide panel button is clicked !
		$("div#btn").click(function(){
			$("div#panel").slideToggle("fast");
		});

	});

Now what it basically means is that when a div with id btn (which is actually slide panel handle at the bottom of the panel) is clicked, slide toggle the div with id panel which is our panel.

See Demo.

Download Code.