SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The amazing dissappearing nav bar!

    Hey, it's amazing but but it's not want I want to achieve. Please make it appear again. You can see it at the link below. If you hit refresh you'll be a bale to see the nav bar for a split of second.

    Have a look: http://auctionexcel.com/css/test5.htm

    Here's the code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script type="text/javascript">
    function init()
    {
    if(document.getElementById && document.createTextNode)
    {
    var mn=document.getElementById('mainnav');
    var as=mn.getElementsByTagName('a');
    for (var i=0;i<as.length;i++)
    {
    as[i].onclick=function(){show(this);return false}
    as[i].onkeypress=function(){show(this);return false}
    }
    hidem();
    }
    }
    function show(l)
    {
    hidem();
    var id=l.href.match(/#(\w.+)/)[1];
    document.getElementById(id).style.display='block';
    }
    function hidem()
    {
    for (var i=0;i<document.getElementsByTagName('div').length;i++)
    {
    document.getElementsByTagName('div')[i].style.display='none';
    }
    }
    window.onload=init;
    </script>
    <style type="text/css">
    /* navigation */
    #nav {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 75%;
    font-family:Arial, Helvetica, sans-serif;
    background:url(http://auctionexcel.com/css/images/navcorner_right.gif) no-repeat right top;
    padding-right:7px;
    height:33px;
    }
    #nav ul {
    margin: 0px;
    padding: 0px;
    padding-left:7px;
    height:33px;
    background:url(http://auctionexcel.com/css/images/navcorner_left.gif) no-repeat left top;
    float:left;
    }
    #nav li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    background: url(images/navback_darkgreen.gif);
    height:33px;
    line-height:33px;
    }
    #nav a {
    float: left;
    padding:0 16px;
    height:33px;
    text-decoration: none;
    border-bottom: none;
    color: #fff;
    background: url(images/navback_lightgreen.gif);
    }
    #nav a.last{padding:0 18px;}
    #nav a:hover, #nav a.active {
    color: #fff;
    background:transparent;
    }


    </style>
    </head>
    <body>
    <div id="nav">
    <ul id="mainnav">
    <li><a href="#acc">Accounts</a></li>
    <li><a href="#mor">Mortgages</a></li>
    <li><a href="#loa">Loans</a></li>
    <li><a href="#con">Convenience Services</a></li>
    <li><a href="#inv">Investment Planning</a></li>
    <li><a href="#you">Young Finance</a></li>
    <li><a class="last" href="#">FMFCU Info</a></li>
    </ul>
    </div>
    <div id="acc">...why data...</div>
    <div id="mor">...now data...</div>
    <div id="loa">...brown data...</div>
    <div id="con">...cow data...</div>
    </body>
    </html>
    Last edited by AAM; Feb 28, 2006 at 12:25.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •