Results 1 to 4 of 4

Thread: Anyone have code for dropdown links for lazuli main_horiz_menu?

  1. #1
    Join Date
    Apr 2009
    Posts
    8

    Question Anyone have code for dropdown links for lazuli main_horiz_menu?

    Wondering if anyone has menu css for drop down links in the lazuli template main_horiz_menu, I dont think it is possible with the existing code, if no one replies I will have to make it myself.

    existing main_horiz_menu in main.css.
    Code:
    #main_horiz_menu {
    	float:left;
    	width:100%;
    	height:26px;
    	margin:0;
    	padding:0;
    	border-top:1px solid #A9A9A9;
    	white-space:nowrap;
    	background-color:#59616A;
    	}
    	#main_horiz_menu ul {
    		float:left;
    		margin:0;
    		padding:0;
    		list-style:none;
    		font-weight:bold;
    		}
    	#main_horiz_menu li {
    		float:left;
    		margin:0;
    		padding:0;
    		}
    		#main_horiz_menu li a {
    			line-height:25px;
    			border-right:solid 1px #A3A3A3;
    			}
    		#main_horiz_menu a:link, #main_horiz_menu a:visited {
    			float:left;
    			padding:0 20px 0 20px;
    			border-bottom:1px solid #9FB6D5; /* SAME COLOR AS BACKGROUND */
    			font-size:11px;
    			font-weight:bold;
    			text-decoration:none;
    			color:#FFFFFF;
    			}
    		#main_horiz_menu a:hover {
    			padding-top:2px;
    			line-height:24px;
    			border-bottom:1px solid #FFFFFF;
    			text-decoration:none;
    			color:#000000;
    			background-color:#B9C5D3;
    			}
    I was not sure if that code was usable for drop down links so I tried to add the following but it did not work:

    Code:
    This is only an example:
    
    <div id="main_horiz_menu">
    <ul>
     <li><a href="{page_link_4}">Contact us</a>
      <li><a href="#">Search</a>
        <ul>
    <li><a href="{baseurl}/index.php?action=search_step_2&amp;pclass[]=1" title="Homes">Homes</a></li>
    <li><a href="{baseurl}/index.php?action=search_step_2&amp;pclass[]=3" title="Farms">Farms</a></li>
    <li><a href="{baseurl}/index.php?action=search_step_2&amp;pclass[]=4" title="Commercial">Commercial</a></li>
    <li><a href="{baseurl}/index.php?action=search_step_2&amp;pclass[]=2" title="Land">Land</a></li>
        </ul>
      </li>
    
     </ul>
    I would not have posted this but I just sometimes find it hard to make css dropdown menu's

  2. #2
    Join Date
    Dec 2004
    Location
    German, since 2000 in Spain
    Age
    50
    Posts
    826

    Default Re: Anyone have code for dropdown links for lazuli main_horiz_menu?

    This websites I find very helpfull when I am looking for menus:

    http://www.dynamicdrive.com

    http://www.cssplay.co.uk

    http://www.stunicholls.com

  3. #3
    Join Date
    Apr 2009
    Posts
    8

    Default Re: Anyone have code for dropdown links for lazuli main_horiz_menu?

    Thank you, I found a site like that and I am making my own, I will post it here when done.

  4. #4
    Join Date
    Apr 2009
    Posts
    8

    Default Re: Anyone have code for dropdown links for lazuli main_horiz_menu?

    I don’t suppose anyone will use it but here is it anyway.
    Its probably messed up somewhere but it seems to work.
    Probably better off using one of the links above and use a new design but I wanted to use the same design so below is the same style except with one background color change.


    main.html
    Code:
    <!--- Replace <div id="main_horiz_menu">       with <div id="navigation-1">  ---->
    
    <div id="navigation-1">  
    	<li><a href="{page_link_3}">ABOUT US</a></li>
    								<li><a href="{page_link_2}">CONTACT US</a></li>
    								<li><a href="{url_search}">SEARCH LISTINGS</a>
     <!---important class="navigation-2" --->  <ul class="navigation-2">
    <li><a href="http://www.timesharegeeks.com/index.php?pclass%5B%5D=1&action=search_step_2" title="Homes">Timeshares for Rent</a></li>
    <li><a href="http://www.timesharegeeks.com/index.php?pclass%5B%5D=2&action=search_step_2" title="Farms">Timeshares for Sale</a></li>
        </ul>
      </li>
    								
    		
    
    <li><a href="{baseurl}/admin/index.php?action=add_listing_property_class" title="Add Listing">ADD LISTING</a></li>
    
    </ul>
    </div>

    add this to your css
    Code:
    /***********************************************************************************/
    
    
    #navigation-1 {
    	float:left;
    	width:100%;
    	height:26px;
    	margin:0;
    	padding:0;
    	border-top:1px solid #A9A9A9;
    	white-space:nowrap;
    	background-color:#59616A;
    	list-style:none;
    	font-size:11px;
    	font-weight:bold;
    	color:#FFFFFF;
    }
    
        #navigation-1  ul {
    		float:left;
    		margin:0;
    		padding:0;
    		list-style:none;
    		}
    
    #navigation-1 li {
    	margin:0;
    	padding:0;
    	display:block;
    	float:left;
    	position:relative;
    	padding:0;
    	
    }
    #navigation-1 li a:link, #navigation-1 li a:visited {
    	padding:0;
    	display:block;
    	text-align:center;
    	background:#59616A;
    	text-decoration:none;
    	border-right:solid 1px #A3A3A3;
    	color:#ffffff;
    	padding:0 20px 0 20px;
    	line-height:25px;
    	font-weight:bold;
    }
    #navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
    	padding:0;
    	display:block;
    	text-align:center;
    	text-decoration:none;
    	background:#B9C5D3;
    	color:#ffffff;
    	padding:0 20px 0 20px;
    	
    
    }
    #navigation-1 li ul.navigation-2 {
    	margin:0;
    	list-style:none;
    	display:none;
    	width:100%;
    	position:absolute;
    	left:-1px;
    	
    }
    #navigation-1 li:hover ul.navigation-2 {
    	display:block;
    	background-color:#59616A;
    	border-bottom:1px solid #ffffff;
    	
    }
    #navigation-1 li ul.navigation-2 li {
    	border-bottom:1px solid #ffffff;
    	clear:left;
    
    }
    #navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
    	clear:left;
    	padding:0;
    	width:149px;
    	border:none;
    	background:#59616A;
    	position:relative;
    	z-index:1000;
    }
    #navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
    	clear:left;
    	background:#B9C5D3;
    	padding:0;
    	width:149px;
    	border:none;
    	position:relative;
    	z-index:1000; 
    }
    #navigation-1 li ul.navigation-2 li ul.navigation-3 {
    	display:none;
    	margin:0;
    	padding:0;
    	list-style:none;
    	position:absolute;
    		border-bottom:1px solid #ffffff;
    	left:145px;
    	top:-2px;
    	padding:1px 1px 0 1px;
      border: none;
    	border-left:1px solid #000000;
    	z-index:900; 
    }
    #navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
    	display:block;
    		border-bottom:1px solid #ffffff;
    }
    #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
    	 
    }
    #navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
    	background:#666666; 
    		border-bottom:1px solid #ffffff;
    }
    #navigation-1 li ul.navigation-2 li a span {
    	position:absolute;
    	top:0;
    	left:132px;
    	font-size:12pt;
    	color:#fe676f; 
    }
    #navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
    	position:absolute;
    	top:0;
    	left:132px;
    	font-size:11px;
    	font-weight:bold;
    	color:#ffffff; 
    		border-bottom:1px solid #ffffff;
    
    }
                        
                        
    
    /*******************************************************************************/

Similar Threads

  1. U.M.P. on Lazuli
    By maxpi3 in forum Templates - Help/Ideas/Discussion (CLOSED)
    Replies: 1
    Last Post: 02-11-2009, 12:34 PM
  2. Lazuli Theme and listing photos
    By gsicard in forum Templates - Help/Ideas/Discussion (CLOSED)
    Replies: 2
    Last Post: 02-08-2009, 03:33 PM
  3. code insertion hack or required code?
    By Yellowcake in forum General Help (CLOSED)
    Replies: 12
    Last Post: 02-05-2009, 09:43 PM
  4. Lazuli is Multilingual Ready
    By jhornegold in forum Language help, ideas, discussion & Releases (CLOSED)
    Replies: 3
    Last Post: 01-06-2009, 01:02 PM
  5. Vserion 2.5.2 Lazuli Template Problems
    By REC in forum Templates - Help/Ideas/Discussion (CLOSED)
    Replies: 14
    Last Post: 07-14-2008, 10:46 AM

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
  •