Results 1 to 6 of 6

Thread: How to add menu with css

  1. #1
    Join Date
    Jan 2010
    Posts
    74

    How to add menu with css

    I would like to add a menu with css, but even searching the web, all those that I find no way to integrate my stylesheet (it was not me who made this sheet)

    This is my style sheet
    HTML Code:
    /* Applicable values by default on any page
    --------------------------------------------------------------------------------------------------------*/
    *{margin:0; padding:0; list-style:none;}
    body{font:64% Arial, Helvetica, sans-serif; background:#DADADA; padding:45px 0 20px;}
    a{text-decoration:none;color:#444;}
    a:hover{color:#00a0fc;}
    a img {border:0px none; }
     
    h2{background:url('img/h2.jpg');height:34px;font-size:1.1em;text-align:right;position:relative;text-transform:uppercase;line-height:20px;font-family:Verdana;color:#2c5ab0; padding-left:0; padding-right:20px; padding-top:0; padding-bottom:0}
    .tl{position:absolute;top:0;left:0;font-size:0}
    .tr{position:absolute;top:0;right:0;font-size:0}
    .clear{visibility:hidden;clear:both; min-height:1px}
     
    /* Layout, Structure of Blocks
    --------------------------------------------------------------------------------------------------------*/
    #wrapper{width:1000px; margin: 0 auto}
     
    #header{background:url('img/header.jpg');height:204px;margin-bottom:20px; position:relative}
     
    #content{width:761px;float:right; padding:0 1px 20px 0;}
     
    #sidebar{width:203px; padding-bottom:20px;}
     
    #footer{background:url('img/footer.jpg') no-repeat;height:57px; clear:both; margin-top:20px}
    
    /*  Content
    --------------------------------------------------------------------------------------------------------*/
    /**** Header ****/
    #header h1{position:absolute;width:420px;height:50px;left:250px;top:60px; font-size:0}
    #header h1 a{display:block;width:100%;height:100%;text-indent:-5000px;}
     
    #header ul#toolbar{position:absolute;top:176px;left:202px;}
    #header ul#toolbar li{float:left;}
    #header ul#toolbar li a{display:block;width:116px;line-height:23px;margin-right:2px; text-transform:uppercase; text-align:center;color:#e5edf4;font-weight:bold;font-family:Tahoma;font-size:1.1em; letter-spacing:1px;}
    #header ul#toolbar li a:hover{color:#c1c1f4;}
    #header ul#toolbar li form#searchengine input{border:0px none;background:none}
    #header ul#toolbar li form#searchengine input#q{width:93px; font-size:1.1em;margin:6px 0 0 7px;}
    #header ul#toolbar li form#searchengine input#sub1{width:12px;height:14px; font-size:0;margin:-4px 0 0; vertical-align: middle; cursor:pointer;}
    Next, I include a menu of the header as follows

    HTML Code:
    <li><a href="http://www.maxif1.com" title="Back to Home">Home</a></li>
    <li>
    	<a href="#" title="Coming soon on Maxif1.com">ticketing</a>
    </li>
     
    <li><a href="http://www.maxif1.com/Forum" title="Community MaxiF1, discuss of the F1, and all motorsports">forum</a></li>
    <li><a href="http://www.maxif1.com/Forum/directory.php" title="Directory of motorsports">Directory</a></li>
    <li><a href="aff_contact.php" title="Contact Webmaster">contact</a></li>
    I want to have the menu on Ticket with different menu as Formula 1, Moto GP, A1 GP

    But now I do not know how someone can help me or at least enlighten me on what to do

  2. #2
    Join Date
    Nov 2008
    Posts
    1,054

    Re: How to add menu with css

    In the header you must add this javascript
    HTML Code:
    <script type="text/javascript" language="javascript">
    <!--
    var timerID;
    function showSSMenu(sMenu){
    	var timeout = 2000;
    	obj = document.getElementById(sMenu);
    	obj.style.display = "block";
    	timerID = setInterval(function(){hideSSMenu(sMenu);},timeout);
    }
    function hideSSMenu(sMenu){
    	clearInterval(timerID);
    	obj = document.getElementById(sMenu);
    	obj.style.display = "none";
    }
    -->
    </script>
    Then your menu

    Code:
    <li><a href="http://www.maxif1.com" title="Back to Home">Home</a></li>
            <li><a onmouseover="showSSMenu('underMenu1');" href="#" title="Shortly on Maxif1.com">ticketing</a>
            	<div id="underMenu1">
                    <ul>
                        <li><a href="#">Formula 1</a></li>
                        <li><a href="#">Moto Gp</a></li>
                        <li><a href="#">A1 GP</a></li>
                    </ul>
                </div>
            </li>        
            <li><a href="http://www.maxif1.com/Forum" title="Community MaxiF1, discuss of the F1, and all motorsports">forum</a></li>
            <li><a href="http://www.maxif1.com/Forum/directory.php" title="Annuaire des sports mécaniques">Directory</a></li>
            <li><a href="aff_contact.php" title="Contact Webmaster">contact</a></li>
    and you must make a ptit addition to your css

    Code:
    #underMenu1{
    	display:none;
    }
    #underMenu1 ul, #underMenu1 ul li{
    	text-align:center;
    	width:115px;
    	height:22px;
    	line-height:22px;
    	display:block;
    	color:#E5EDF4;
    }
    #underMenu1 ul li{
    	background-color:#A3A3A3;
    	border-top:#FFF 1px solid;
    }

  3. #3
    Join Date
    Jan 2010
    Posts
    74

    Re: How to add menu with css

    Hello, I just do what you say and it works almost. I put the code in case I made a mistake

    Code:
    *{margin:0; padding:0; list-style:none;}
    body{font:64% Arial, Helvetica, sans-serif; background:#DADADA; padding:45px 0 20px;}
    a{text-decoration:none;color:#444;}
    a:hover{color:#00a0fc;}
    a img {border:0px none; }
     
    h2{background:url('img/h2.jpg');height:34px;font-size:1.1em;text-align:right;position:relative;text-transform:uppercase;line-height:20px;font-family:Verdana;color:#2c5ab0; padding-left:0; padding-right:20px; padding-top:0; padding-bottom:0}
    .tl{position:absolute;top:0;left:0;font-size:0}
    .tr{position:absolute;top:0;right:0;font-size:0}
    .clear{visibility:hidden;clear:both; min-height:1px}
     
    #underMenu1{
    	display:none;
    }
    #underMenu1 ul, #underMenu1 ul li{
    	text-align:center;
    	width:115px;
    	height:22px;
    	line-height:22px;
    	display:block;
    	color:#E5EDF4;
    }
    #underMenu1 ul li{
    	background-color:#A3A3A3;
    	border-top:#FFF 1px solid;
    }
    #wrapper{width:1000px; margin: 0 auto}
     
    #header{background:url('img/header.jpg');height:204px;margin-bottom:20px; position:relative}
     
    #content{width:761px;float:right; padding:0 1px 20px 0;}
     
    #sidebar{width:203px; padding-bottom:20px;}
     
    #footer{background:url('img/footer.jpg') no-repeat;height:57px; clear:both; margin-top:20px}
    
    #header h1{position:absolute;width:420px;height:50px;left:250px;top:60px; font-size:0}
    #header h1 a{display:block;width:100%;height:100%;text-indent:-5000px;}
     
    #header ul#toolbar{position:absolute;top:176px;left:202px;}
    #header ul#toolbar li{float:left;}
    #header ul#toolbar li a{display:block;width:116px;line-height:23px;margin-right:2px; text-transform:uppercase; text-align:center;color:#e5edf4;font-weight:bold;font-family:Tahoma;font-size:1.1em; letter-spacing:1px;}
    #header ul#toolbar li a:hover{color:#c1c1f4;}
    #header ul#toolbar li form#searchengine input{border:0px none;background:none}
    #header ul#toolbar li form#searchengine input#q{width:93px; font-size:1.1em;margin:6px 0 0 7px;}
    #header ul#toolbar li form#searchengine input#sub1{width:12px;height:14px; font-size:0;margin:-4px 0 0; vertical-align: middle; cursor:pointer;}
    And the code of my web page

    Code:
    <title>MaxiF1 - Trombinoscope drivers</title>
    <style type="text/css">
    @import "style_bis.css";
    </style>
    <link rel="stylesheet" href="script/css/lightbox.css" type="text/css" media="screen" />
    	
    	<script src="script/js/prototype.js" type="text/javascript"></script>
    	<script src="script/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    	<script src="script/js/lightbox.js" type="text/javascript"></script>
    	<script type="text/javascript" language="javascript">
    <!--
    var timerID;
    function showSSMenu(sMenu){
    	var timeout = 2000;
    	obj = document.getElementById(sMenu);
    	obj.style.display = "block";
    	timerID = setInterval(function(){hideSSMenu(sMenu);},timeout);
    }
    function hideSSMenu(sMenu){
    	clearInterval(timerID);
    	obj = document.getElementById(sMenu);
    	obj.style.display = "none";
    }
    -->
    </script>
    </head>
     
    <body>
    <?
    	include ("include/temps.php");
    		$mt1 = microTime();
    	include("config.php");
    	?>
     <div id="wrapper">
     
     <!--=============== Header =================--> 
      <div id="header">
       <h1><a href="http://www.maxif1.com">MaxiF1.com</a></h1>
       
       <ul id="toolbar">
       <li><a href="http://www.maxif1.com" title="Retour Ã* l'accueil">accueil</a></li>
            <li><a onmouseover="showSSMenu('underMenu1');" href="#" title="Coming soon on Maxif1.com">ticketing</a>
            	<div id="underMenu1">
                    <ul>
                        <li><a href="#">Formula 1</a></li>
                        <li><a href="#">Moto Gp</a></li>
                        <li><a href="#">A1 GP</a></li>
                    </ul>
                </div>
            </li>        
            <li><a href="http://www.maxif1.com/Forum" title="Community MaxiF1, discuss of the F1, and all motorsports">forum</a></li>
            <li><a href="http://www.maxif1.com/Forum/directory.php" title="Directory of motorsports">Directory</a></li>
            <li><a href="aff_contact.php" title="Contact Webmaster">contact</a></li>
         <form id="searchengine" method="get" action="http://www.google.com/search" />
          <p>
           <input type="text" name="q" id="q" value="Research" onclick="this.value=''" />
           <input type="submit" id="sub1" value="" />
    	<input type="hidden" name="sitesearch" value="maxif1.com" />
          </p>
         </form>
        </li>
       </ul>
      </div><!-- end #header -->
    What happens is that the menu is still active and when it is active, I displaced orbits the Left menu

  4. #4
    Join Date
    Nov 2008
    Posts
    1,054

    Re: How to add menu with css

    it seems that my turn will be time between

    Code:
    #underMenu1{
    	display:none;
    }
    #underMenu1 ul, #underMenu1 ul li{
    	text-align:center;
    	width:115px;
    	height:22px;
    	line-height:22px;
    	display:block;
    	color:#E5EDF4;
    }
    #underMenu1 ul li{
    	background-color:#A3A3A3;
    	border-top:#FFF 1px solid;
    }
    to

    Code:
    .menu span, .ssmenu span {
      display:none;
    }
     
    .menu a, .ssmenu a {
      text-decoration:none;
      color:#FFFF00;
    }
     
    .menu {
      padding:0;
    }
     
    .ssmenu {
      padding:0;
    }
    in css

  5. #5
    Join Date
    Jan 2010
    Posts
    74

    Re: How to add menu with css

    Yes, I do not know why, I just put your css and it works almost. I always an offset with the search tab

    And my menu goes above the first block of the page to solve it, would not be possible instead that any fall, aligned below the menu box office horizontally instead of vertically.

    Thank you for your help, it was more than a week that I tried and it works almost there

    Can you still give me a helping hand

  6. #6
    Join Date
    Nov 2008
    Posts
    1,054

    Re: How to add menu with css

    Code:
    #underMenu1{
    	display:none;
    }
    #underMenu1 ul, #underMenu1 ul li{
    	text-align:center;
    	width:115px;
    	height:22px;
    	line-height:22px;
    	display:block;
    	color:#E5EDF4;
    }
    #underMenu1 ul li{
    	background-color:#A3A3A3;
    	border-top:#FFF 1px solid;
    }

Similar Threads

  1. Replies: 3
    Last Post: 17-08-2012, 05:43 PM
  2. Replies: 4
    Last Post: 29-05-2012, 11:30 AM
  3. Replies: 6
    Last Post: 15-03-2011, 02:39 PM
  4. Display of the Program Menu In Windows 7 As the Cascade Menu
    By dinkster in forum Customize Desktop
    Replies: 4
    Last Post: 04-12-2010, 11:14 PM

Tags for this Thread

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
  •  
Page generated in 1,642,662,845.65963 seconds with 17 queries