JavaScript - Navigation Bar..... Help!!!!!!!!!!!!

Hello

I have a javascript navigation bar at the top of my page. I would like to split the navigation with 3 links on the left side of my logo and 3 links on the right side. Like this....

Home Designs Services (LOGO IMAGE) About FAQ's Contact

Can someone help me figure out how to split a javascript navigation? I don't know if it should be separate navigation for the right and left or if it is just a CSS change? Below is my javascript and CSS.

Code:

<script type="text/javascript" src="tinydropdown.js"></script>
</script>
<div class="nav">
    <ul id="menu" class="menu">
    <li class="nodiv"><a href="#">Home</a></li>
        <li><a href="#">Designs</a>
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li class="submenu">
                    <a href="#">Three</a>
                    <ul>
                        <li class="noborder"><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                    </ul>
                </li>      
            </ul>
        </li>
        <li><span>Services</span>
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
                <li class="submenu">
					<span>No Link</span><ul>
                		<li class="noborder"><a href="#">One</a></li>
                		<li><a href="#">Two</a></li>
                		<li><a href="#">Three</a></li>
                		<li><a href="#">Four</a></li>
                		<li><a href="#">Five</a></li>
					</ul>
				</li>
                <li><a href="#">Five</a></li>
                <li><a href="#">Six</a></li>
            </ul>
        </li>
         <li class="nodiv"><a href="#">About</a></li>
        <li><a href="#">FAQ's</a>
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li class="submenu">
                    <a href="#">Three</a>
                    <ul>
                        <li class="noborder"><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                    </ul>
                </li>      
            </ul>
        <li class="nodiv"><a href="#">Contact</a></li></li>
      </li>
    </ul>
</div>
<script type="text/javascript">
var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'});
</script>

Code:

.nav {
	height:36px;
	color:#fff;
	text-shadow:1px 1px #888;
	position:absolute;
	z-index: 100;
	width: 960px;
	padding-top: 70px;
	padding-left: 0px;
	}
	
	
.menu a {
	float:left; 
	color:#eee; 
	text-decoration:none; 
	width:120px; 
	height:28px; 
	padding-top:8px;
	}
	
.menu span {
	float:left; 
	color:#eee; 
	text-decoration:none; 
	width:120px; height:28px; 
	padding-top:8px;
	}
	
	
.menu a:hover {
	color:#fff;
	}
	
.menu {
	list-style:none; 
	font:16px Arial,Verdana; 
	text-align:center; 
	width:900px; 
	margin:0 auto;
	}
	
.menu li {
	position:relative; 
	float:left; 
	width:120px; 
	z-index:1000;
	}
	
.menu ul {
	display:none; 
	position:absolute; 
	font:normal 13px Arial,Verdana; 
	top:36px; 
	left:0; 
	background:#aaa; 
	display:none; 
	list-style:none;
	}
	
.menu ul li {
	float:none; 
	border-top:1px solid #ccc; 
	width:120px;
	}
	
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {
	float:none; 
	display:block; 
	background:none; 
	height:22px; 
	padding-top:5px;
	}
	
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {background:#999; 
color:#fff;
}

.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {
	float:none; 
	display:block; 
	background:none;
	 height:22px; 
	 padding-top:5px;
	 }
	 
.menu ul ul {
	left:120px; 
	top:0;
	}
	
.menu li.submenu {
	font-weight:bold;
	}
	
.menu li.noborder {
	border-top:none;
	}
	
li.menuhover a, li.menuhover li.menuhover a {
	color:#fff; 
	background:#999;
	}
	
li.menuhover span, li.menuhover li.menuhover span {
	color:#fff; 
	background:#999;
	}

THANKS!

Hi, I'm using the following javascript to allow users to navigate through my various picture galleries on my blog http://exp212.blogspot.com/

Quote:
<script type="text/javascript">
function show(what)
{var find = "Img" + what.id.substring(4); for ( var i = 1; i < 99999; ++i )
{var cur = "Img" + i; var img = document.getElementById(cur); if ( img == null ) return; img.style.display = ( find == cur ) ? "block" : "none"; }}
</script>

<div id="pix">

<img id="Img1" src="http://1.bp.blogspot.com/_P6fRcsNpSXY/S8Y7oLQJNII/AAAAAAAABpI/fJMx9Gp0AWU/s320/night1.jpg" style="display: block;" />
<img id="Img2" src="http://2.bp.blogspot.com/_P6fRcsNpSXY/S8Y7o5484JI/AAAAAAAABpM/1ZMn1wRbAB8/s320/night2.jpg" />
<img id="Img3" src="http://3.bp.blogspot.com/_P6fRcsNpSXY/S8Y7pSrB94I/AAAAAAAABpQ/KKIQQH0uJz4/s320/night3.jpg" />
<img id="Img4" src="http://1.bp.blogspot.com/_P6fRcsNpSXY/S8Y7p7eUA6I/AAAAAAAABpU/MMy7MrIvZcg/s320/night4.jpg" />
<img id="Img5" src="http://2.bp.blogspot.com/_P6fRcsNpSXY/S8Y7qtRJVnI/AAAAAAAABpY/zFMRSGb8Qhk/s320/night5.jpg" /></div>

<div id="names">

<div id="Name1" onmouseover="show(this);">001</div>
<div id="Name2" onmouseover="show(this);">002</div>
<div id="Name3" onmouseover="show(this);">003</div>
<div id="Name4" onmouseover="show(this);">004</div>
<div id="Name5" onmouseover="show(this);">005</div>
</div>


As you can see (if you visit the blog) each picture is brought up by hovering over the next number in the sequence, but in order to save space I'd like to change this so it uses a simple 'Next' and 'Previous' function. How would I adapt the above javascript in order to achieve this?

Thank you in advance.

now i am making a navigation menu using images by on mouse over function,
i want to make a div that shows menu using css and javascript function

plz find the attached image .. and try to help me

Resolved.

Good morning,

This is my first post here and if it is in the wrong forum I do apologise. I am looking for help with a navigation element on which my page titles have outgrown the existing navigation. I have considered reducing page titles but know this would only be a short term solution.

My web pages can be accessed http://www.eskside.co.uk/ss_rohilla/index.htm here as can my array http://www.eskside.co.uk/ss_rohilla/array.js and menu http://www.eskside.co.uk/ss_rohilla/menu.js

I must admit that JS is somewhat complex to me and the basic design was created a long time before we moved and lost contact with friends. If you could assist me I would be most grateful.

Colin

Can anyone show me the code for a simple expanding navigation bar? I need to roll over the nav bar and for it to drop down with more options.

I know the code will be straight forward, I can't work it out though.

Thanks whoever can help = )

Hi guys,

I have a javascript drop-down navigation bar on my website. While I am creating the website, the drop-down have no problem overlaying the javascript (embed with flash) photo gallery in Firefox. But when I tested it in IE, it did not overlay the javascript script and the drop-down was covered by the photo gallery instead.

I tried methods like Z-index, using Div etc but it still doesn't work on Internet Explorer. I tested on Safari, Opera and Firefox doesn't seem to have any problem. Here is my links to my CSS use for my website. Really need help, have no idea what I did wrong. Can anyone advise me what to do? Thank you so much!!!! Much appreciated!!!

Working Website:
http://17thstop.sg/demo

CSS Files:
http://17thstop.sg/demo/styles.css
http://17thstop.sg/demo/css/default.advanced.css
http://17thstop.sg/demo/css/default.css
http://17thstop.sg/demo/css/dropdown.css

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- #BeginTemplate "index.dwt" -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" ></link>
<link rel="icon" type="image/gif" href="animated_favicon1.gif" ></link>
<title>Four Musketters Studio</title>

<script type="text/javascript" src="gallery/swfobject.js"></script>

<!-- Menu CSS and JS -->
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

<!-- End of Menu and JS -->

</head>

<body>
	<div id="content">
		<h1><a href="index-blueprint.htm"><span>Four Musketeers</span> Studio</a></h1></div>

<!-- Start of Menu -->	
<div id="contentmenu"><ul id="nav" class="dropdown dropdown-horizontal">
	<li><a href="index.htm">Home</a></li>
	<li class="dir">About Us
		<ul>
			<li><a href="about_us.htm">The Four Musketters</a></li>			
			<li class="dir">The Team
				<ul>
					<li><a href="darren.htm">Darren</a></li>
					<li><a href="jon.htm">Jonathan</a></li>
					<li><a href="hweek.htm">Hwee Key</a></li>
					<li><a href="gavin.htm">Gavin</a></li>
				</ul>
			</li>
			<li><a href="./">Clients</a></li>
			<li><a href="./">Testimonials</a></li>
			<li><a href="./">Press</a></li>
			<li><a href="./">FAQs</a></li>
		</ul>
	</li>
	<li class="dir">Services
		<ul>
			<li><a href="cne.htm">Event & Commercial Photography</a></li>
			<li><a href="portrait.htm">Portrait Photography</a></li>
			<li><a href="wedding.htm">Wedding Photography</a></li>
			<li><a href="studio.htm">Rental of Studio</a></li>
			<li><a href="./">Training &amp; Consulting</a></li>
		</ul>
	</li>
	<li><a href="gallery3/gllery.htm">Gallery</a></li>
	<li><a href="./">Events</a></li>
	<li><a href="./">Careers</a></li>
	<li><a href="./" class="dir">Contact Us</a>
		<ul>
			<li><a href="contact.htm">Enquiry Form</a></li>
			<li><a href="locationc.htm">Contact Us & Location</a></li>		
			</ul>
	</li>
</ul>
</div>
<!-- End of Menu -->

<div id="content1">

	<!-- #BeginEditable "BodyContent" -->

	<div id="flashcontent">AutoViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>	
	<!-- #EndEditable -->
	<script type="text/javascript">
		var fo = new SWFObject("gallery/autoviewer.swf", "autoviewer", "100%", "100%", "8", "#181818");
			fo.addVariable("xmlURL", "gallery/gallery.xml");		
				
		//Optional Configuration
		//fo.addVariable("langOpenImage", "Open Image in New Window");
		//fo.addVariable("langAbout", "About");	
		//fo.addVariable("xmlURL", "gallery/gallery.xml");					
		
		fo.write("flashcontent");	
		
	</script></div>


			<div id="footer">
				<p id="links">
				Copyright &copy; 2010 &minus; Four Musketters Studio &middot; Your Number 1 Choice.
				</p>
				<p>
					<a href="#">Home</a>
					<a href="#">Practice</a>
					<a href="#">Attorneys</a>
					<a href="#">Accidents</a>
					<a href="#">News</a>
					<a href="#">About Us</a>
					<a href="#">Contact Us</a>
				</p>
			</div>

</body>

<!-- #EndTemplate -->

</html>

Hi, I'm building an html web page (no flash) and was wondering if it was possible to fade (or slide up from the horizontal rule) my navigation links into the page, one after the other, for the home page only, and ideally only for the first session visit. Aside from looking cool, I think it will draw the attention of the visitor and let them know where their main links are. I've experimented with animated .gif's, but not only was the implementation buggy, it didn't give me the flexibility to quickly edit the links.

I'm thinking some sort of JavaScript (or css?) can accomplish this, but I don't know the first thing about writing JavaScript and I couldn't find any script on the web. Does anyone know if such a script does exist, or if there's a better way I should go about doing this? Thanks!

Here's the structure for my main index:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="templates/styles.css">

<title>Test</title>

</head>

<body class="main">

<center>
<table border="0" cellspacing="0" cellpadding="0" width="800" class="header">
	<tr>
		<td align="left" valign="bottom" width="455" height="45"><a href="index.html" class="nav"><img src="images/logo.png" alt="Logo"></a></td>
		<td align="right" valign="bottom" width="146" height="45"> <a href="link1/index.html" class="nav">Link1</a> </td>
		<td align="right" valign="bottom" width="103" height="45"> <a href="link2/index.html" class="nav">Link2</a> </td>
		<td align="right" valign="bottom" width="96" height="45"> <a href="link3/index.html" class="nav">Link3</a> </td>
	</tr>
	<tr>
		<td align="center" valign="top" width="800" height="10" colspan="4"><hr noshade></td>
	</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="800">
	<tr>
		<td width="800" height="10"></td>
	</tr>
	<tr>
		<td align="center" valign="top" width="800" height="440">
		CONTENT WILL GO HERE
		</td>
	</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="800">
	<tr>
		<td align="center" valign="bottom" height="45" class="footer">
		<hr noshade>
		</td>
	</tr>
</table>

</center>
</body>
</html>

I found the effect I would like to achieve here, but the code doesn't allow me to make turn the text into links, and I would like to leave the links where they are in the html and maybe the JavaScript could call each link by id?
http://www.codingforums.com/showthre...072#post923072
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
    width:600px;
    margin:auto;
 }
#container p{
    height:100%;
 }
#p4 {
    font-family:'times new roman',serif;
    font-size:18px;
    color:#006;
    text-align:justify;
 }
</style>

<script type="text/javascript">
  var lines=new Array();
      lines[0]='text1';
      lines[1]='text2';
      lines[2]='text3';
      lines[3]='text4';
      lines[4]=
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.'+ 
'Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus '+ 
'nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. '+ 
'Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, '+ 
'nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,'+  
'ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate '+ 
'ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta '+ 
'bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.';
  var c=0;
  var value=0;
  var speed=20;

function addLines() {
if(c>=lines.length) {
   return;
}
   par=document.createElement('p');
   par.setAttribute('id','p'+c);
   par.appendChild(document.createTextNode(lines[c]));
   document.getElementById('container').appendChild(par); 
   setOpacity();
}

function setOpacity() {
   obj=document.getElementById('p'+c);
if(value>100) {
   value=0;
   c++;
   return addLines();
 }
if(obj.filters) {
   obj.style.filter='alpha(opacity='+value+')';
 }
else {
   obj.style.opacity=value/100;
 }
   value++;
setTimeout('setOpacity()',speed);
 }

window.onload=function() {
   addLines();
 }
</script>

</head>
<body>

<div id="container"></div>

</body>
</html>

Hello,

I'm working on a page navigation script and i'm stuck at a part.

I have made a little picture gallery script and my team partners can fill in how many folders they want to show on a page.

So example i have 5 folders and want to show 2 folders per page i tried to use code like this

var totalFolderPages = 1;

if ((parseInt(pageCounter) / parseInt(totalFoldersPerPage) % 1 == 0)) {

totalFolderPages++;

}

I'm still a bit new in coding and don't know how i can create a working solution for my page navigation.

Some help would be great

Hi forums,

I'm building a website for my class and one of the things I was planning on doing is building a navigation where when you hover over the mouse, depending on which side, I wanted the content to scroll from that particular direction. The problem is, I am terrible at Javascript. I have nothing to work with, just the idea.



This is an illustration to what I was referring to. Is there a term for this? All I really need is just something to work with, a redirect to an existing example that vaguely captures this idea along with the source is fine. I tried finding myself, but I only found and worked with one Javascript navigation and it didn't do what I was expecting to do.

Any assistance is highly appreciated.

hello, would anyone be able to share with me a concept of how to build a vertical navigation bar that allows you to hover over the section and a hidden area with links would appear?
thank you

Hi guys,

This is the first site I have tried to make with Javascript because I thought it was about time I learned it properly. Apologies if my code is extremely ugly. Suggestions are more than welcome.

I have a single large page that the Javascript controls so the viewing screen 'focuses' on the div referenced by the link. It is a 3x3 array of divs with each div being its own 'page' as far as the user is concerned.
It would be nice if it worked something like this site only with the links inside each 'pages' div instead of around the outside in a separate frame. I looked at their code and realised it would work well for what I wanted with some modifications (it is a free code tutorial thing so no rage). Turned out it basically needed to be re-written.

The navigation I am using works fine so long as the links on the central 'home' div are used but as soon as I copy + paste the working code into one of the other divs they cease to work as links, they still appear but they don't do anything while the ones on the 'home page' still work fine.
I have no idea why but I feel like it might have something to do with object oriented coding. I read the two posts on the subject in the FAQ's and can understand the difference between the two styles but don't really know where to go from here.

The relevant html code goes like so:
Code:

             
<div id="one" class="elements">
   <div class="block25">
     <span class="go1"><img src="images/go1.png" alt="One"><h4>ONE</h4></span>
   </div>

While the javascript is as thus:
Code:

$('.go1').click(function(){
 $('#one').click();
 });

 $('#one').click(function(){;
 	currentId = $('selected').attr('id');
	goId = section[0][0];
	$target = $('div[id=' + goId +']');
	$paneTarget.stop().scrollTo($target, 800, { margin: true } );
	$('div[id=' + currentId +'], div[id=' + goId +']').toggleClass('selected');
});

I tried making separate function names for each div's links and calling them something like go11, go12, etc but that didn't seem to fix anything. I just realised that I only duplicated and renamed the first part of the code eg. Code:

$('.go12').click(function(){
 $('#one2').click();
 });

and not the rest. I suppose if I did all of it, the navigation would probably work but I would have 9x more code than I have right now.
Edit : Turns out it still doesn't work. I am incredibly stumped by this.
Why would it not work even if the function names are different? The only thing that is remaining the same is the div id that is being referenced and animated to.

How difficult would it be for me to convert what I have into object oriented code? Would this even be what I need to do?

If anyone can help me out then I would be really grateful. Thanks!
I know I should take the time to go through tutorials and learn it properly but this site is supposed to be part of a project for uni that is due soon so I don't really have the time. Later I will do some more learning and figure it all out.


I'm also wondering how I would go about applying easing to the animation between div's. Should I use some sort of jQuery library or some custom code like this article suggests?

due to the version of dreamweaver i have (MX-2004) i have had to hand code a drop down menu myself however i have come across a problem.

i'm not sure if the problem is in the Javascript, HTML, or CSS however here go

when ever i hover over the menus dont drop down they cascade up and the other problem is that when ever i hover over one of the buttons a menu from another pops up and not the one that should.

here is the codes so you can have a look

javascript:
Code:

<script type="text/javascript">

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

function mopen(id)
{	

	mcancelclosetime();

	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}

function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

document.onclick = mclose; 
</script>

HTML code
Code:

<table align="center" width="950px" border="0" cellpadding="0">
  <tr>
  	<td height="50">
	<div align="center">
        <table width="100%" border="0" cellpadding="2" cellspacing="0">
          <tr>
            <td width="100%" height="48" align="center" bgcolor="#CF8D72">
              <ul id="sddm"><li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<!-- travel guides drop menu -->
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Guides</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
    	<a href="#">Africa</a>
		<a href="#">Asia</a>
		<a href="#">Australia</a>
		<a href="#">Europe</a>
		<a href="#">North America</a>
		<a href="#">South America</a>
		<a href="#">Vesas</a>
		<a href="#">Carnas</a>
		<a href="#">Driving Over Sea</a>
        </div>
    </li>
	<!-- adventures drop menu -->
	<li><a href="#"
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Adventures</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">up & coming Adventures</a>
		<a href="#">The Team</a>
		<a href="#">the Journey</a>
		<a href="#">pod casts</a>
		<a href="#">Photo Gallery</a>
        </div>
    </li>
	<!-- travel news drop menu -->
	<li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Travel News</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
    	<a href="#">Advice</a>
		<a href="#">Destinations</a>
		<a href="#">Holidays</a>
		<a href="#">Cities</a>
		<a href="#">Cruses</a>
		<a href="#">Hotels</a>
		<a href="#">Snow & skis</a>
		<a href="#">Expats</a>
		<a href="#">Watch Dog</a>
        </div>
    </li>
    <li><a href="#">Forum</a></li>
	<li><a href="#">Chatroom</a></li>
	<li><a href="#">Travel Shop</a></li>
</ul>
<div style="clear:both"></div>
</td>
          </tr>
        </table>
   </div></td>

and the CSS
Code:

#sddm
{ 
	width: 99%;
	margin:'margin-top' 'margin-right' 'margin-bottom' 'margin-left' 0px
	font-weight: bold;
	z-index: 30
}

#sddm li
{	
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: "Baskerville Old Face", Baskerville, "Times New Roman" bold 11px; 
}

#sddm li a
{	
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 90px;
	background: url(/images/navigation/chromebg4.gif) center center repeat-x;
	color: #000000;
	text-align: center;
	text-decoration: none;
}

#sddm li a:hover
{	
	background: url(image/navigation/chromebg4-over.gif) center center repeat-x;
}

#sddm div
{
	position:absolute;
	top: 0;
	border: 1px solid #E8BEBE;
	border-bottom-width: 0;
	font: "Baskerville Old Face", Baskerville, "Times New Roman" 13px;
	line-height:18px;
	z-index:100;
	background-color: white;
	width: 140px;
	visibility: hidden;
	height: 296px;
}

	#sddm div a
	{	
		position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		font: "Baskerville Old Face", Baskerville, "Times New Roman" 13px bold;
	}

	#sddm div a:hover
	{	background-color: #FFECEC;
		color: #000000;}

I have been given a scenario to do as a bit of work for my course the scenario is below:



Introduction
The communication protocols on the Internet such as HTTP are stateless. State can be maintained in a number of ways within the client server architecture. One weak technique used by the HTTP client to maintain state is to keep a record of previously visited Uniform Resource Locators. These locations are stored by the client and accessed via the backward and forward button of the web browser.

Design Brief
Design a system that models the way the client browser maintains the aforementioned state. The system must allow the user to enter a new URL into the system and either go back to a URL loaded previous to the current URL or go forward to a URL loaded after the current URL. The storage mechanism used by the browser must include two stacks (one backward and one forward) both of which support the following behaviour:

LIFO
Pop item from stack
Push item onto stack
Empty a stack

Generally speaking, the backward stack stores items of previously visited URLs and the forward stack stores items moved from the backward stack to the forward stack.

The system must allow the user to interact in three ways: enter a new URL, recover URLs from the backward stack; and recover URLs from the forward stack. The actions of the user should produce the following results:

Entering URL (via an address bar)
Push current document onto backward stack
Empty forward stack
Recover URL from backward stack
Push current document onto forward stack
Pop backward stack
Load popped URL as current document
Load URL from forward stack
Push current document onto back stack
Pop forward stack
Load popped URL as current document
Additional Rules
A new Window has empty stacks
Popping an Empty Stack is not fatal


Programming isnt my strongest skill and wanted to know where to start off with doing this and what kind of code to use.

Thanks