HTML - How To Make A Navigation Menu?

Hi,

Can anybody tell me how to code a sliding navigation bar? By sliding navigation menu i mean that when the user scrolls down the page, the navigation menu follows the screen down and vice versa.

Below I have pasted my code for my navigation menu.

Cheers,

<div id"quicklinks">
<p id="quicklinks">

<img src="images/greekflag.jpg" alt="Greek Flag"><br>
<br>
<a href="index.html">Home</a><br>
<br>
<a href="pages/apartment.html">Apartment Details</a><br>
<br>
<a href="pages/kassiopi.html">Kassiopi</a><br>
<br>
<a href="pages/corfu.html">Corfu</a><br>
<br>
<a href="pages/corfutimeline.html">Corfu Timeline</a><br>
<br>
<a href="pages/gallery.html">Gallery</a><br>
<br>
<a href="pages/quiz.html">Corfu Quiz</a><br>
<br>
<u><b>External Links</b></u><br>
<br>
<a target="_blank"href="http://www.kassiopi.info">Kassiopi Experience</a><br>
<br>
<a target="_blank" href="http://www.kassiopi.org">Kassiopi</a><br>
<br>
<a target="_blank" href="http://www.greeklandscapes.com/greece/corfu.html">Hydropolis Water<br> Park</a><br>
<br>
<a target="_blank" href="http://www.agni.gr">Agni</a><br>
<br>
<a target="_blank" href="http://www.kassiopi-cosmic.com">Kassiopi-Cosmic</a><br>
<br>
<a target="_blank" href="http://www.aqualand-corfu.com">Aqualand</a><br>
<br>
<a target="_blank" href="http://www.yannisrentacar.gr">Yannis Rentacar</a><br>
<br>
<img src="images/greekflag.jpg" alt="Greek Flag">
</div>
</p>

I'm trying to build a horizontal menu that has tabs. Basically it's a horizontal 5px line with the inactive links/tabs upside down hanging from the line, and the active page having the tab above the line. But I'm having a heck of a time getting the css to work on the one tab on top (contact link shown here). Anyone have any ideas how I can accomplish this? You can see my css attempt below. Thanks!!



Code:

#menu
{
	width: 490px;
	height: 20px;
	padding-left: 300px;
	padding-top: 72px;
	border-bottom: 5px solid #b8ac85;
}

#menu.down
{
	width: 490px;
	height: 20px;
	padding-left: 300px;
	padding-top: 92px;
	border-bottom: 5px solid #b8ac85;
}

#menu ul {
	list-style: none;	
}

#menu li {
	
	display: inline; 
	
}

#menu.up ul {
	list-style: none;
	padding-top:40px;
}

#menu.up li {
	
	display: inline; 
	padding-top:-40px;
	
}

#menu a {
	float: left;
	width: 84px;
	height: 20px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: #663300;
	font-weight: normal;
	font-size: 12px;
	text-transform: uppercase;
	padding-top: 5px;
	background: url(images/button_down.gif) no-repeat;
}

#menu a:hover {
	width: 84px;
        height: 20px;
	padding-top: 5px;
	color: #FFffff;
	text-decoration: underline;
}

#menu a.up:link {
	float: left;
	width: 84px;
	height: 20px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: #663300;
	font-weight: normal;
	font-size: 12px;
	text-transform: uppercase;
	padding-top: 5px;
	background: url(images/button_up.gif) no-repeat;
}

#menu a.up:hover {
	width: 84px;
        height: 20px;
	padding-top: 5px;
	color: #FFffff;
	text-decoration: underline;
}

Does anyone know how to create this in Dreamweaver? I'm mostly interested in how the navigation bar jpg has sort of an image map idea to it (even though it's not an image map).

This is how the navigation bar looks in your html browsers:



This is how it looks without any CSS coding:



This is how the navigation bar's jpg looks alone:

(different states for how the navigation "button" will look when hovered over, clicked, etc)

Any help would be greatly appreciated!

I'm very new to HTML/CSS/Javascript. In the website I'm trying to build, I want to display a relatively simple navigation menu on the left side of the webpage, similar in look to the one here (example):
http://build-website.com/design/opportunity.html

Is there some way to put the initialization text for the navigation menu in a separate .html file (or, just some other file), so that every time I want to add a section/link to the nav menu, I won't have to go through each of my web pages individually and add the code for the link? (I am not going to use frames because, among other things, that would make it more difficult to bookmark and copy addresses of individual pages)

I have been teaching myself through the w3schools tutorials, but despite looking through them and googling for answers I haven't been able to find a solution. Is this possible in HTML? Something that would allow something like like <div src="navmenu.html"> would be ideal but I haven't been able to find anything.

(At the moment I'm just using notepad and typing in code manually)

<form
method="post" name="nameform"> <font color="#9933CC"
size="2" face="Times New Roman"><select name="tanyasmenu"
size="1" style="BACKGROUND: #cc99ff; BORDER-BOTTOM: outset; BORDER-LEFT:
outset; BORDER-RIGHT: outset; BORDER-TOP: outset; COLOR: #0066FF; FONT-FAMILY:
Times New Roman; FONT-SIZE: 12px"> <option selected value="http://something.com">name here</option>
<option value="http://something.com">name here</option>
<option value="http://something.com">name here</option>
</select> <input type="button" value="Go" onclick="location
= document.nameform.tanyasmenu.options [document.nameform.tanyasmenu.selectedIndex].value;"
style="BACKGROUND: #cc99ff; COLOR: #0066FF; FONT-FAMILY: Times New Roman;
FONT-SIZE: 12px"> </form>

Hello everybody! First timer here. I'm a total noob here that somehow got assigned to design our company's website. My company is very understanding about my lack of experience and is willing to send me to any training I need. So, here's my question: Go to www.whitehouse.gov. I think the pretty scrolling menu at the top is exactly the kind of thing I want on my new website. How do I make something like that? I guess this breaks down into several separate ideas:
I look at the source and I see that the menu is all set on a background image file called bg-main-one.jpg. How do you design these kinds of images? I love how you can right-click the submenu and open in a new tab. A lot of these menus I've seen you can't do that. I also love how the hyperlink appears on the status bar. Why isn't it like that everywhere? Hovering the mouse over each menu's title launches a separate menu. Is that just your basic ul li list-item HTML accompaned by extremely complex CSS?
So how do I create something like that? What groovy technologies do I need to know?

Hi, I have a bit of a problem. I am learning HTML and CSS, and I am trying to make a simple menu withh a background button up state and a horizontal unordered list across, with a hover effect of a new bg image over the initial ones. Please help! Thanks in advance.

Helpful Tip:

I have a menu, created with ul and li's, as apposed to divs, with some white space at the end.

Each li is set to float:left and i want to add another li which fills the remainder of the white space.

For the page to be compliant with the w3c standards it has to be an li (within an ul/ol), so how do you make an li fill the remaining white space?

Simply set the fill-white-space li to float:none; display: block;

Because all the other li's are set to float, it will sit beside them, but act as a block and fill the remainder of the line.

I hope this helps someone.

Took me a good while to work out (stumbled across it by chance).

Matthew Millar

Hey guys,

I was wondering if anyone could help me?

I wish to produce a website which works in the following way:

The header and footer remain the same, and do not reload on page refresh. Then, links on a menu bar stimulate loading a new page, however only the content below the header changes.

An example of this, is the CushyCMS website (http://www.cushycms.com). When you click the menu links, the header doesn't reload, only the page content does.

How would I do this?

My reason for wanting this method, is because I wish to have an image slider present within the header of all of my pages, and I don't wish to have to update every page each time I wish to add an image.

Please help?

Many thanks,
Luke

please help me guys!!! im trying to find a html code that allows people download a pdf files from the website that im trying to make..anyone out there help me..

I am trying to get rid of the "You have to click to activate this function" mumbo jumbo for a site I am doing. I tried following these directions...
http://www.adobe.com/devnet/activeco...devletter.html
but am having a rough time getting it to work... here is my code.
Code:

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','900','height','140','src','GoodDock','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','GoodDock' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="140">
  <param name="movie" value="images/GoodDock.swf" />
  <param name="quality" value="high" />
  <embed src="images/GoodDock.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="140"></embed>
</object></noscript>

Hello,

I'm new to this forum, so first, hello! Actually, I'm new to web design in general but have taken on the role at the church I work at because our old site was a mess. I downloaded some nice looking templates and have been using them as a foundation. The site is www.miamibc.com. If you go there and look at the header menu (home, about us, etc), I want to consolidate that menu some and add a drop down menu with more choices. Is there a way I can do this while keeping it looking the way it does now? If you need any more info from me, let me know. Thanks for your help!

Ben

So with some trial and error (and much help from the topics on this forum) I figured out how to make my navigation bar static throughout my templates. But now I have another problem, I'm not sure how to add another link to it.. Not successfully at least. I can add another menu, but either it won't go on the bar, or it will force another link off and it will be below the bar.

I used This to make my bar, but the site doesn't seem to be working right now. If that isn't good to use, would someone be so kind to recommend a good free\cheap one?

Also, I am using Kompozer and have little experience with any of this.. So any help is greatly appreciated.

(BTW, sorry if this is the wrong section.)

I am new to html and web designing. I have an idea for a Navigation Bar but I do not know if its possible or if its been done before. My idea is for a horizontal Nav Bar with a green background. As the visitor puts his or her cursor over the link, a lightning bolt appears from the left side and extends to the right to where the cursor is located. When the cursor moves to the links on the right side it extends, and to the left it retracts. The lightning design will be above the green background but behind the text of the link.

Has this ever been done before, if so where can I find it? If not, how can I make one just like it? Are there any navigation generators or 3rd party applications that have pre-set options to allow this as well?

Hi people,

I'm taking care of my web site but I would like to improve it with your help as I'm a bit of an ignorant with html and stuff.

The navigation bar I've created is actually not a real navigation bar I believe. Every time you change page the bar reloads with the new page, you know what I mean?

See for yourself http://www.clorinde.org/clorinde/index.htm

How can I fix this so the loading of the pafe would be smoother and faster?

Would you be able to provide me some codes?

Thanks!