1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Adding menu bar to Bike Riders template

Discussion in 'Web Development' started by akumabito, Dec 16, 2009.

  1. akumabito

    akumabito New Member

    Hi everyone, first post here! Gotta say I'm a big fan of these templates - excellent work for all kinds of websites.

    I love the bike riders template for its simplicity and userfriendliness. However, the menu bar has me stumped. See, I need more buttons than the seven that come with the template. I figured out how I could make them narrower, but then it becomes hared to read the text. Ideally, I'd have a double navigation bar - just doubling up the existing navbar..

    Sounds simple, but for some reason I just can not get it to work. I am probaby just overlooking something real basic that'll make me feel like a moron later on.. ;)

    I have tried simply adding a <br> and doubling the "navlist" portion of the HTML file. That did not work. So I renamed the new bar "navlist1", headed over to the CSS file, copied all the navbar related items, renamed those to navbar1, edited the distance from the top and tried again.. still no success..

    It would be greatly appreciated if anyone could solve the mystery for me..
     
    akumabito, Dec 16, 2009
    #1
  2. enigma1

    enigma1 New Member

    One way is to use drop-down menus using css or jscripts. Another is to use another layer again with css or jscripts that to open a second line like sub-tabs.

    With drop-down menus here is a sample.

    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" dir="ltr" lang="en">
<head>
<title>test form</title>
<style type="text/css">

#menu {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
}
#menu ul {
padding: 0px;
margin: 0px;
width: 800px;
list-style-type: none;
}

#menu ul li {
position: relative;
width: 200px;
}

#menu li {
float: left;
width: 100%;
background: #990;
border-top: #555 1px solid;
}

#menu li ul li {
float: none;
}

#menu a {
color: #EFEFEF;
width: 200px;
text-indent: 4px;
line-height: 25px;
display: block;
text-decoration: none;
}

#menu a:hover {
color: #FFFFFF;
background-color: #FF0000;
}

#menu ul li ul {
visibility: hidden;
position: absolute;
left: 0;
top: 100%;
}

#menu ul li:hover ul {
visibility: visible;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#Bar1">Bar1</a>
<ul>

<li><a href="#Sub1">Sub1</a></li>
<li><a href="#Sub2">Sub2</a></li>
</ul>
</li>
<li><a href="#Bar2">Bar2</a>
<ul>
<li><a href="#Sub3">Sub3</a></li>

<li><a href="#Sub4">Sub4</a></li>
</ul>
</li>
<li><a href="#Bar4">Bar3</a></li>
</ul>
</div>
</body>
</html>
    You can extract the css and html and integrate it with your template. The code includes the html headers. It should run on the modern browsers without problems.
     
    enigma1, Dec 17, 2009
    #2