Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    36
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question Some help with Menus & Auto Scroll

    Hi all, been reading through the forum for a little while and found it very imformative to a newbie.

    Now, I'm after a bit of help with the menu on a page I'm working my way through. I'm also after an auto scrolling motion with an element of the page.

    Here is the page I'm talking about:

    www.iseetechnology.co.uk

    Starting with the menu..

    I'm talking about the menu at the top of the page:

    ---- HOME ---- SERVICES ---- GALLERY ----- ABOUT US ---- CONTACT US

    What I'm after is a 'hover over' option on each of these menu items and as the hover over appears then various sub menu items will appear. For example under services it will say CCTV, IP TECNOLOGY etc etc

    Each of the main menu items will need at least two sub menu options.

    In addition to this, the clickable scroll bar with five options below the main menu - IT SALES AND INSTALLATION, NETWORK INSATLL AND MANAGEMENT ect - Can this be made to auto scroll from left to right every few seconds, so the user doesn't need to click to see all the services?

    Here is the code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>iSeeTechnology - IT, CCTV and Smart Home Specialists</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <script src="lib/jquery-1.4.2.min.js" type="text/javascript"></script>
    
    <script src="lib/jcarousellite.js" type="text/javascript"></script>
    <script type="text/javascript">
    
    	$(document).ready(function(){
    	
    	  $("a.new_window").attr("target", "_blank");
    	  
    	  //carousel
    	  $(".carousel").jCarouselLite({
    		  btnNext: ".next",
    		  btnPrev: ".prev"
    	  });
    	});
    		
    </script>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    
    
    <div id="bg">
    
    <div id="main">
    <!-- header begins -->
    <div id="header">	
    	<div id="logo">
        	<a href="#">Top Title</a>
          	<h2><a href="#"><small>Company Slogan Goes Here</small></a></h2>
        </div>
        <div id="buttons">
          <a href="index.html" class="but"  title="">Home</a>
          <a href="blog.html" class="but" title="">Services</a>
          <a href="gallery.html"  class="but" title="">Gallery</a>
          <a href="about_us.html"  class="but" title="">About&nbsp;us</a>
          <a href="contact_us.html" class="but" title="">Contact&nbsp;us</a>
        </div>
    </div>
    <!-- header ends -->
    <div class="top">
    	
     	<div class="carousel-box">
    						<div class="prev"><a href="#"><img src="images/prev.png" alt="" /></a></div>
    						<div class="next"><a href="#"><img src="images/next2.png" alt="" /></a></div>
    						<div class="carousel">
    							<ul>
    								<li>
    									<div class="box">
    										
    																	<div class="inner">
    																		<h4>IT Sales, 
    
    Installation & Support
    </h4>
    																		<p>Confused by the 
    
    choice of equipment on the market today.  Contact us to help you make the right choice.</p>
    																		<div class="im"><img 
    
    src="images/header1.png" alt="" /></div>
    																		<p>Whether you're a 
    
    business or home user we can help with upgrades or choosing new equipment including laptops and PC's.</p>
    																		<div class="read"><a 
    
    href="">Click for more information</a></div>
    																	</div>
    																
    									</div>
    								</li>
    								<li>
    									<div class="box">
    										
    																
    																		<div class="inner">
    																			<h4> Network 
    
    Installation & Management</h4>																		
    
    	
    																			<p>We offer a 
    
    full range of high quality IP Solutions, including WAN, LAN, Wi-Fi & Voip.</p>
    																		<div class="im"><img 
    
    src="images/header2.png" alt="" /></div>
    																		<p>We can supply, 
    
    install and maintain Wireless Systems, Broadband, Firewalls, VPN & RDC as well as cabling installations.</p>
    																		<div class="read"><a 
    
    href="">Click for more information</a></div>
    																		</div>
    																	
    									</div>
    								</li>
    								<li>
    									<div class="box">
    										
    																		<div class="inner">
    																			<h4> CCTV 
    
    Installation and Maintanance</h4>
    																			<p>We offer 
    
    tailor made CCTV systems for the home, office or large business premises.</p>
    																		<div class="im"><img 
    
    src="images/header3.png" alt="" /></div>
    																		<p>Choose wireless or 
    
    wired CCTV systems, monitor over the internet or to you smartphone.  Unique 3G remote site CCTV.</p>
    																		<div class="read"><a 
    
    href="">Click for more information</a></div>																
    
    			
    																		</div>
    																	
    										</div>				
    								</li>
    								<li>
    									<div class="box">
    										
    																		<div class="inner">
    																			<h4> Smart Home 
    
    Technology</h4>
    																			<p>Cutting edge 
    
    SmartHome techology designed around your specifications, requirements and budget.</p>
    																		<div class="im"><img 
    
    src="images/header4.png" alt="" /></div>
    																		<p>Whether you need an 
    
    intergated sound system, home cinema, lighting or intelligent alarms we can help.</p>
    																		<div class="read"><a 
    
    href="">Click for more information</a></div>																
    
    			
    																		</div>
    																	
    										</div>				
    								</li>
    								<li>
    									<div class="box">
    										
    																		<div class="inner">
    																			<h4>Business 
    
    Technology</h4>
    																			<p>Let us take 
    
    the pressure off your day to day IT and POS requirements with our business services.</p>
    																		<div class="im"><img 
    
    src="images/header5.png" alt="" /></div>
    																		<p>Whether you need 
    
    domain naming or webpage hosting, Point of sale systems or biometric clocking-in systems then try us.</p>
    																		<div class="read"><a 
    
    href="">Click for more information</a></div>																
    
    			
    																		</div>
    																	
    										</div>				
    								</li>
    							</ul>
    						</div>
    					</div>
    	 
    </div>
    
            <!-- content begins -->
            		<div id="content_top"></div>
           			<div id="content">
                    	
                        <h1>Welcome To i***********</h1>
                      <img src="images/img11.jpg" class="img_l" alt="" />
                          <span class="span_cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br />
                          Ut convallis rhoncus diam ut scelerisque. Nulla id mi ut augue laoreet commodo sed quis dolor. Aliquam sed arcu risus, non mattis nisi. Aenean 
    
    urna tortor, consequat sed mattis eget, condimentum at lacus. Fusce elit nisl, vehicula ut interdum eget, faucibus ultricies turpis.<br />
    						Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Quisque sed dolor 
    
    est, ut pulvinar nunc. Quisque nec arcu a orci scelerisque facilisis non vel ligula. Integer ultrices lacus sapien. Sed id leo magna, bibendum viverra enim. Integer 
    
    pulvinar cursus consectetur. 
                   	  <div class="read_r"><a href="#">more</a></div><br />
                      <div class="razd_g"></div><br />
                    
                          	<div class="col">
                           	  <h1>IT Sales, Installation & Support</h1>
                              <img src="images/col_img1.jpg" class="img_l" alt="" />Nunc tempus libero dictum lectus pharetra pretium. Ut eu massa vitae magna porta  suada 
    
    et ultrices vitae, commodo in velit. Etiam luctus rhoncus arcu, ac euismod leo feugiat vel. Morbi commodo nulla quis augue
                              <div class="read_r"><a href="#">more</a></div>
                           		
                          	</div>
                      <div class="col_razd"></div>
                            <div class="col">
                            	<h1 class="tit">Our Unique Stable CCTV System</h1>
                                <img src="images/col_img2.jpg" class="img_l" alt="" />We are pleased to offer our new and unique stable CCTV system. Remote viewing of your 
    
    stables. No internet access or power source at your stables? No problem!  We have a solution to suit your needs.  View your stables over the internet, iPhone or 
    
    Android device from anywhere in the world.
                                <div class="read_r"><a href="#">more</a></div>
                   	  </div>
                      <div class="col_razd"></div>
                            <div class="col">
                            	<h1 class="tit">Domain Naming & Web Hosting</h1>
                              <img src="images/col_img3.jpg" class="img_l" alt="" />Domain naming provides your company with an internet presence.  Choose your name and 
    
    we'll do the rest for you to safeguard your mark.  Web hosting is arranged for you, this can include mail servers to provide each of your staff their own unique email 
    
    address. 
                              <div class="read_r"><a href="#">more</a></div>
                            
                   	  </div>
                      <div style="clear: both"></div>
                      <div style="height:15px; width: 100%"></div>
                      <div class="razd_g"></div>
                          
                          <div style="clear: both"></div>
                     
            		</div>
                    <div id="content_bot"></div>
        <!-- content ends --> 
        <div style="height:15px; width: 100%"></div>
        <!-- bottom begin -->
        <div id="content_top"></div>
        <div id="bottom">
        	<div id="b_col1">
            	<h1>About Us</h1>
                <div style="height:5px; width: 100%"></div>
                <img src="images/bottom_i1.jpg" alt="" /><div style="height:5px"></div>
                Proin adipiscing fringilla nibh id hendrerit. Duis accumsan, arcu ac porta sus
                <div class="more"><a href="#">more <img src="images/fish_more.gif" alt="" /></a>&nbsp;&nbsp;</div>
            </div>
            <div id="b_col2">
            	<h1>Services</h1>
                <ul>
               	  	<li><a href="#">IT Sales</a></li>
                                        <li><a href="#">IT Installation</a></li>
                                        <li><a href="#">Internet / Wi-Fi Support</a></li>
                                        <li><a href="#">Domain Registration / Hosting</a></li>
                                        <li><a href="#">CCTV Supply & Installation</a></li>
    									<li><a href="#">Ut quis ornare</a></li>
    									<li><a href="#">Vestibulum augue purus</a></li>
    									<li><a href="#">RSS Subscribe</a></li>
                </ul>
          	</div>
            <div id="b_col3">
           	  <h1>Follow Us</h1>
            	<ul>
               	  	<li><img src="images/fu_i1.gif" class=" fu_i" alt="" /><a href="#">Email</a></li>
                    <li><img src="images/fu_i2.gif" class=" fu_i" alt="" /><a href="#">Facebook</a></li>
                    <li><img src="images/fu_i3.gif" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
                    <li><img src="images/fu_i4.gif" class=" fu_i" alt="" /><a href="#">Twitter</a></li>
                </ul>
          </div>
          <div id="b_col4">
          		<h1>Contact Information</h1>
                *******House<br />
                **** Street, *******<br />
    		******** <br />
    			Phone:  05555 555555<br />
    			Mobile: 07777 777777<br />
    			E-mail: tech@******.co.uk
        		
          </div>
          <div style="clear: both; height:1px;"></div>
        </div>
        <div id="content_bot"></div>
         <!-- bottom end --> 
    <!-- footer begins -->
                
    <div id="footer">
        <p>Copyright  2011-2012. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates 
    
    as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This 
    
    page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
    
     </div>           
    <!-- footer ends -->
    </div>
    
    </div>
    
    </body>
    </html>

    Thanks so much in hopeful advance.

    Yan

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    For example under services it will say CCTV, IP TECNOLOGY etc etc
    Have you added the necessary HTML to make the drop down menu? Have a look at http://www.htmldog.com/articles/suckerfish/dropdowns/ to see how to make a drop down menu.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    isee (06-05-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    36
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks for the reply..

    I've had a play and managed to get my head round it, though this is trial and error rather than expertise...

    I've thinned the code down to get a drop down menu but it looks very basic..

    I'd like a option that can be bolted on to what I already have.

    I only need one extra layer from each heading.

    Help would be REALLY appreciated.

    Thanks


  •  

    Tags for this Thread

    Posting Permissions

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