CSS Navigation Menu Generator - Webmaster Tools - Webmaster Tools, Developer Tools, Programming Tools

Affiliate Promotion
Blog Help
Domain Name Tips
How To
Newsletter Marketing
Online Business Help
Search Engine Tricks
Web Development
Web Hosting
Website Advertising
Website Content
Website Marketing

Forums Sitemap
Mobile Linux
APP Generation ROI
IBM® developerWorks

Weekly Newsletter

Developer Updates
Free Website Content

Articles

Forums

All Feeds

Write For Us Get Paid

Request Media Kit

Site Map

Privacy Policy
Support

USERNAME

PASSWORD

>>> SIGN UP!

Lost Password?

Back to the CSS Navigation Menu Generator

Add the CSS Navigation Menu Generator to your site
To embed the CSS Navigation Menu Generator within your site, just cut and paste the HTML code snippet below into your web page.

Simply click in the text box below. The code will highlight. Copy with Alt-C (Command-C for Macintosh). Then paste into your site's code. The table has a width of 345 pixels.

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td valign="top">
      <table width="300" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="16" height="16"><img src="http://images.devshed.com/dm/tools/image_01.gif" width="16" height="16"></td>
          <td width="130" height="16" background="http://images.devshed.com/dm/tools/bckg06.gif"><img src="http://images.devshed.com/dm/tools/spacer.gif" width="130" height="16"></td>
          <td width="118" height="16" background="http://images.devshed.com/dm/tools/bckg06.gif"><img src="http://images.devshed.com/dm/tools/spacer.gif" width="150" height="16"></td>
          <td width="40" background="http://images.devshed.com/dm/tools/bckg06.gif"><img src="http://images.devshed.com/dm/tools/spacer.gif" width="40" height="16"></td>
          <td width="18" height="16"><img src="http://images.devshed.com/dm/tools/image_02.gif" width="16" height="16"></td>
        </tr>
        <tr>
          <td height="30" background="http://images.devshed.com/dm/tools/bckg07.gif"> </td>
          <td class=toolbox width="*" bgcolor="#CCCCCC" colspan=2 valign=top>
          <B><font size=+1>CSS Navigation Menu Generator Tool</font></b> © <a href="http://tools.devshed.com">Dev Mechanic™</a>
          <font size="2" face="Courier New, Courier, mono">
			    <SCRIPT language=JavaScript1.2>
<!--
// JavaScript - CSS Nav. Bar
     var linkamount = 1
     var selected = 0
     var linkbuffer = ""
     var transfer = 0

function AddLink()
{
	whatlink = document.navform.navname.value + " | " + document.navform.navurl.value
	if(whatlink != "" && whatlink != " " && whatlink != "" && whatlink != " ")
	{
	     document.navform.navmenuview.options[linkamount] = new Option(whatlink)
	     document.navform.navmenuview.options[linkamount].value = whatlink
	     document.navform.navname.value = ""
	     document.navform.navurl.value = ""
		linkamount++
	}
}

function linkselect()
{
     if(document.navform.navmenuview.selectedIndex != 0)
	 {
	      selected = document.navform.navmenuview.selectedIndex
      }
}

function deletelink()
{
     if(selected != 0)
	 {
	      document.navform.navmenuview.options[selected] = null; linkamount--
	 }
}

function copyall()
{
     document.navform.navlinks.value = ""

for(count=1;count<linkamount;count++)
	{
	     document.navform.navlinks.value += (document.navform.navmenuview.options[count].value + "\n")
	}
transfer = 1
}

function transfercheck()
{
     if(!transfer)
	      {return false} 
     else 
	      {return true}
}

function open_colorpalette(){
	winpops=window.open("/components/com_mechtools/templates/colorpalette.htm","","width=320,height=390,top=100,left=100,status,")
}
//-->
</SCRIPT>
<form action="" method="post" name="navform" target="_parent" id="navform">
  <table width="95%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
    <tr> 
      <td align="center" valign="middle"><h4>Enter Navigation names and URLs</h4></td>
    </tr>
    <tr> 
      <td height="32" align="center" valign="middle"><table width="100%" border="0" cellspacing="5" cellpadding="5">
          <tr> 
            <td width="71%" align="center"> <input name="option" type="hidden" id="option" value="com_mechtools"> 
              <input name="tool" type="hidden" id="tool" value="19"> <input name="go" type="hidden" id="go" value="1"> 
              <select 
                              onChange=linkselect() size=10
                              name=navmenuview>
                <option>                
                                  
                                  
                     </option>
              </select></td>
            <td width="29%" align="center" valign="middle"><table width="100%" border="0" cellspacing="5" cellpadding="5">
                <tr> 
                  <td align="center" valign="middle"> <input name="Up" type="button" id="Up" value="Up" onClick="javascript:movelink('up')"></td>
                </tr>
                <tr> 
                  <td align="center" valign="middle"> <input name="Down" type="button" id="Down" value="Down" onClick="javascript:movelink('down')"></td>
                </tr>
                <tr> 
                  <td align="center" valign="middle"><input name="Delete" type="button" id="Delete2" value="Delete" onClick="javascript:deletelink()"> 
                  </td>
                </tr>
              </table></td>
          </tr>
        </table></td>
    </tr>
    <tr> 
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td align="right">Link Name  </td>
            <td> <input size=15 name=navname></td>
          </tr>
          <tr> 
            <td align="right">Link URL  </td>
            <td> <input size=15 name=navurl></td>
          </tr>
        </table></td>
    </tr>
    <tr> 
      <td align="right"> <input onClick=AddLink() type=button value="Add Link" name="button"> 
      </td>
    </tr>
    <tr> 
      <td><hr> </td>
    </tr>
    <tr> 
      <td height="35" align="center" valign="middle"><h4>Navigator Options</h4></td>
    </tr>
    <tr> 
      <td valign="top"><table width="100%" border="0" align="center">
          <tr align="center"> 
            <td colspan="2" valign="middle"><strong>Text</strong></td>
          </tr>
          <tr> 
            <td align="right" valign="middle">Size</td>
            <td> <font color="#663300"> 
              <input type="text" name="textsize" size="6" value="10">
              </font></td>
          </tr>
          <tr> 
            <td align="right" valign="middle">Color </td>
            <td> <font color="#663300"> 
              <input type="text" name="textcolor" size="10" value="#808080">
              </font></td>
          </tr>
          <tr> 
            <td align="right" valign="middle">Mouse Over Color </td>
            <td> <font color="#663300"> 
              <input type="text" name="textmocolor" size="10" value="#FFFFFF">
              </font></td>
          </tr>
          <tr> 
            <td align="right" valign="middle">Font</td>
            <td> <font color="#663300"> 
              <select size=1 name=textfont>
                <option value=arial selected>Arial</option>
                <option value=verdana>Verdana</option>
                <option value=times>Times NR</option>
                <option value=courier>Courier</option>
                <option value=serif>Serif</option>
                <option value=sans-serif>Sans-Serif</option>
                <option value=cursive>Cursive</option>
                <option value=fantasy>Fantasy</option>
                <option value=monospace>Monospace</option>
              </select>
              </font></td>
          </tr>
          <tr> 
            <td align="right" valign="middle">Style</td>
            <td> <font color="#663300"> 
              <select size=4 name=textstyle>
                <option value=N>Normal</option>
                <option value=B selected>Bold</option>
                <option 
                                value=I>Italic</option>
                <option 
                                value=BI>Bold/Italic</option>
              </select>
              </font></td>
          </tr>
          <tr> 
            <td align="right" valign="middle"> </td>
            <td> </td>
          </tr>
          <tr align="center"> 
            <td colspan="2" valign="middle"><strong>Cells</strong></td>
          </tr>
          <tr> 
            <td align="right" valign="middle">Color</td>
            <td><font color="#663300"> 
              <input type="text" name="cellcolor" size="10" value="#FFFFFF">
              </font></td>
          </tr>
          <tr> 
            <td align="right" valign="middle">Mouse Over Color </td>
            <td><font color="#663300"> 
              <input type="text" name="cellmocolor" size="10" value="#9999FF">
              </font></td>
          </tr>
          <tr> 
            <td align="right" valign="middle">Cell Padding</td>
            <td><font color="#663300"> 
              <input type="text" name="cellpad" size="6" value="1">
              </font></td>
          </tr>
          <tr> 
            <td align="right" valign="middle">Border Width</td>
            <td><font color="#663300"> 
              <input type="text" name="cellborder" size="6" value="1">
              </font></td>
          </tr>
          <tr> 
            <td align="right" valign="middle">Border Color</td>
            <td><font color="#663300"> 
              <input type="text" name="cellbcolor" size="10" value="#000000">
              </font></td>
          </tr>
          <tr> 
            <td align="right" valign="middle"> </td>
            <td> </td>
          </tr>
          <tr> 
            <td align="right" valign="middle"> </td>
            <td><input name="Button" type="button" class="tool_button" onClick=open_colorpalette() value="Color Values"></td>
          </tr>
        </table></td>
    </tr>
    <tr> 
      <td><hr> </td>
    </tr>
    <tr> 
      <td valign="middle">Table Width 
        <input type="text" name="tablewidth" size="10" value="100"></td>
    </tr>
    <tr> 
      <td valign="middle" align="right"> <input onClick=copyall() type=submit value=Create Menu name=submitbutton> 
        <input type=hidden name=navlinks> </td>
    </tr>
    <tr> 
      <td valign="middle" align="right"> </td>
    </tr>
  </table>
</form> 
          </font>
          </td>
          <td width="40" valign="top" bgcolor="#CCCCCC"></td>
          <td width="18" background="http://images.devshed.com/dm/tools/bckg03.gif"> </td>
        </tr>
        <tr>
          <td width="16"><img src="http://images.devshed.com/dm/tools/image_03.gif" width="16" height="16"></td>
          <td colspan="3" width="*" height="16" background="http://images.devshed.com/dm/tools/bckg04.gif"><img src="http://images.devshed.com/dm/tools/spacer.gif" width="16" height="16"></td>
          <td width="18"><img src="http://images.devshed.com/dm/tools/image_04.gif" width="16" height="16"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>


developerWorks - FREE Tools!

NEW! Cook up Web sites fast with CakePHP, Part 4: Use CakePHP's Session and Request Handler components

CakePHP is a stable production-ready, rapid-development aid for building Web sites in PHP. This "Cook up Web sites fast with CakePHP" series shows you how to build an online product catalog using CakePHP.
FREE! Go There Now!

NEW! Did you say mainframe? e-kit

Learn how you can extend modern application lifecycle management to IBM System z through the IBM Rational Software Delivery Platform (SDP). The Did you say mainframe? e-kit includes podcasts, webcasts, tutorials, white and red papers, demos, and articles designed to help ease the challenges of modernizing your enterprise. This complimentary kit for mainframe developers is a practical, how-to guide for making the most of an existing development environment, including the skills and infrastructure already in place at an established enterprise.
FREE! Go There Now!

NEW! Download DB2 9.5 for Linux, Unix, and Windows

Download a free trial version of IBM DB2 9.5 for Linux, UNIX, and Windows. DB2 9 is the result of a five-year development project that transformed traditional (static) database technology into an interactive data server that merges the high performance and ease of use of DB2 with the self-describing benefits of XML.
FREE! Go There Now!

NEW! Evaluate IBM Rational Software Analyzer V7.0

Download a free trial version of IBM Rational Software Analyzer Developer Edition V7.0 to identify bug defects earlier in the software development cycle. Rational Software Analyzer is an extensible software development solution that reduces the expense of bug-fixes by enabling static analysis code reviews and bug identification very early in the development cycle.
FREE! Go There Now!

NEW! Hello World: WebSphere Service Registry and Repository

Manage, govern, and share services across your organization by using WebSphere Service Registry and Repository. Follow the hands-on exercises to learn how to navigate the Web interface to publish, find, reuse, and update services.
FREE! Go There Now!

NEW! Rational 'Talks to You' Teleconference Series

This Fall, IBM Rational talks to you directly through a special teleconference series giving you access to the best minds in IBM Rational - product experts and market thought leaders who will answer your questions during these pre-scheduled telephone conference calls. Register today!
FREE! Go There Now!

NEW! Rational Build Forge Express eKit

Rational Build Forge Express Edition is an automation framework that packages the latest enterprise-grade technologies into a reliable, flexible and robust configuration designed and priced specifically for small to midsize businesses. The new Rational Build Forge Express eKit provides you with valuable resources – including a case study, podcast, demo, and articles – to help you increase staff productivity, compress development cycles and deliver better software, fast.
FREE! Go There Now!

NEW! Trial download: IBM Rational Manual Tester V7.0.1

Try the latest version of IBM Rational Manual Tester V7.0.1 by downloading a free trial from IBM developerWorks. This manual test authoring and execution tool promotes test step reuse to reduce the impact of software change on testers and business analysts and addresses the needs of teams performing at least a portion of their testing manually.
FREE! Go There Now!

NEW! Webcast: WebSphere Process Server

WebSphere Process Server delivers a unique integration framework that simplifies existing IT resources. Often, as IT assets grow to support business demand, so too does their complexity and manageability. In this webcast, we’ll discuss how WebSphere Process Server helps deliver an SOA infrastructure that provides a common model to orchestrate, mediate, connect, map, and execute the underlying IT functions. Discover how WebSphere Process Server simplifies integration of business processes by leveraging existing IT assets as reusable services without the complexities of traditional integration methodologies.
FREE! Go There Now!

Refresh! IBM Rational Systems Development Solution eKit

With IBM Rational Systems Development Solution, you can deliver products faster with higher quality. Within this kit, Read the “Model Driven Systems Development” white paper to see how to improve product quality and communication. Then check out the rest of the e-Kit to learn more about important topics that can affect the success of any software project through customer examples, tutorials, informative Webcasts, and best practices for designing, building and managing systems. From start to finish, at every stage in your projects, Rational Systems Development Solution can help your company reach its full potential.
FREE! Go There Now!

All FREE IBM developerWorks Tools!

Create the Optimal Architecture for your Critical Applications
Warburton's the largest independently owned bakery in the UK faced a number of d....

Five Best Practices for Deploying a Successful Service-Oriented Architecture
This white paper describes the benefits you can expect with SOA, and how IBM can....

Gartner Magic Quadrant for Application Delivery Controllers
Gartner summarizes its view on Application Delivery Controllers, evaluates stren....

Knowledge is Power
What you don't know can hurt you, and is likely costing you money and increasing....

Rationalizing the Multi-Tool Environment
The rationalized multi-tool approach is flexible, scalable and cost effective. I....

developerWorks - FREE Tools!