SitePoint Sponsor

User Tag List

Results 1 to 25 of 29

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help using JS with CSS and HTML - Drop down Menu for website

    I'm trying to build a drop down menu. Do I need to incorporate JS to get it to work. My brain is scrambled trying to work it out and looking at different sites. ! Can someone please help me with my code for my website menu? Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Puzzle1. Welcome to the forums.

    No, you can do a drop down menu with CSS alone, as demonstrated here:

    http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

    (View the source code of that page to see how it works. There isn't much. )

    You can use JS to enhance the menu, but it's not needed.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for your help. It's nice to know there is a helpful human being out there.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Ha ha, there are quite a few around here.

    Let us know how you go with this. If you need any help, just ask.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi! I had a good look at the code and there were some lines that I hadn't seen before (such as the hack for the mac!). Is it the use of the margins that force the menu to be horizontal? I though if a ul was used that automatically made the list vertical? I current have a vertical menu on the website I created (first ever site!) and I'm still struggling to apply the what you kindly demonstrated yesterday. www.scottishgreatdaneclub.co.uk I know the code is very amateurish but I got to the point where I just thought it works! Leave it alone!

    I'd like to be able to have the sub menu on my vertical list? Am I best just starting from scratch, rather than try to edit existing code? As you can tell I'm not very good at this! I also noticed that you used em, % and px? is there a reason for this? I've just stuck to px and %.

    Many thanks again for your help

    Puzzle1 (Shona)

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Puzzle1 View Post
    Is it the use of the margins that force the menu to be horizontal? I though if a ul was used that automatically made the list vertical?
    A UL by default does sit vertically, but there are various ways to change that, such as setting LIs to float: left; (as in the linked example—which is not my site, by the way, but that of our resident guru here, @Paul O'B ; )

    An example of a vertical flyout menu is here:

    http://www.pmob.co.uk/temp/dropdown-vertical3.htm

    However, at the moment you don't have any nested sublists to fly out. E.g. You need something like this:

    Code:
    <ul>
      <li><a href="http://scottishgreatdaneclub.co.uk/index.html">Home</a></li>
      <li><a href="http://scottishgreatdaneclub.co.uk/history.html">History</a>
            <ul>
                <li><a href="">Ach aye, sublink 1</a></li>
                <li><a href="">Aye laddeh, sublink 2</a></li>
            </ul>
      </li>
    </ul>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, huge thanks to you and major respect. I've spent a long time trying to figure this out and I was on the point of nearly giving up. I take my hat off to you. Thank you so much

    Puzzle1

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You're most welcome. Glad I could help. There are lots of helpful folk around here, so I hope we'll see you back. The menu may need some refining, so don't hesitate to ask for more help with it.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, back again! I am unable to get the menu to work properly within my website. As you will see I have removed the scroll box, resized the table cells, deleted the nav.css file (my orignal menu file). I'm not sure what else to try? If I construct a completely new table with no other data in it except the menu, it works perfectly. I'd appreciate your input. Below is my code! I've taken a copy of the index.html file and style.css files. Please advise? Thanks.

    Puzzle1 (Shona)

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Welcome to the Scottish Great Dane Club</title>
    <meta name="msvalidate.01" content="9CCBC9C152D72D7379A682909A4D0784" />
    <meta http-equiv="content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="Scottish Great Dane Club Aims">
    <meta name="keywords" content="Scottish; Great; Dane; Club; Scotland; Danes;">
    
    <style media="all">
    
    ul.nav, .nav ul {
    	list-style:none; 
    	margin:0; 
    	padding:0;
    }
    
    .nav li {
    	width:150px; 
    	background-color:#00008B;
    	text-align:center;
    	font-weight:bold;
    	border-top:1px solid white; 
    	border-bottom:1px solid white;
    	position:relative;
    }
    
    .nav a {
    	text-decoration:none;
    	color:white;
    	display: block;
    	background: darkBlue;
    	line-height: 35px;
    }
    
    .nav li a:hover {
    	background:#D8BFD8;
    	font-style:italic;
    	color:#000000;
    }
    
    .nav ul {
    	position: absolute;
    	top: 0;
    	margin-left:-999em;
    	min-height:0;
    }
    
    .nav li:hover ul { margin-left:149px;} 
    </style>
    
    
    </head>
    
    <body>
    <!--Begin table Header and logo-->
    <table border="0" width=100% height=20% cellspacing="0">
    <tr>
    <td class="header"></td>
    </tr>
    </table>
    <!--End Header and logo-->
    <!--End table-->
    
    <!--Begin table. Middle border-->
    <table border="0" width=100% height=5% cellspacing="0">
    <tr>
    <td width=70% class="midborder"></td>
    </tr>
    </table>
    <!--End table.-->
    
    <!--Begin table. Navigation Bar-->
    <table border="0" width=100% height=70% cellspacing="0">
    <tr><td width=25% class="background">
     <ul class="nav">
    	<li><a href="#">Home</a></li>
    	<li><a href="#">The Club</a>
    		<ul>
    			<li><a href="#">History</a></li>
    			<li><a href="#">Rules & Regs</a></li>
    			<li><a href="#">Committee</a></li>
    			<li><a href="#">Membership</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Show Info</a>
    		<ul>
    			<li><a href="#">CH Show</a></li>
    			<li><a href="#">Open Show</a></li>
    			<li><a href="#">Show Dates</a></li>
    			<li><a href="#">Schedules</a></li>
    			<li><a href="#">Show Archives</a></li>	
    		</ul>
    	</li>
    	<li><a href="#">Judging</a>
    		<ul>
    			<li><a href="#">Criteria</a></li>
    			<li><a href="#">SGDC Form</a></li>
    			<li><a href="#">BC Form</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Club Awards</a>
    		<ul>
    			<li><a href="#">2012</a></li>
    			<li><a href="#">2011</a></li>
    			<li><a href="#">2010</a></li>
    			<li><a href="#">Award Archives</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Rescue</a></li>
    	<li><a href="#">Health</a></li>
    	<li><a href="#">Contacts</a></li>
    	<li><a href="#">Links</a></li>
    	<li><a href="#">Blog</a></li>
    </ul>
    </td>
    
    <!--Begin contents-->
    
    <td width=70%  class="content" valign="top">
    
    <h3><center>Welcome to the Scottish Great Dane Club Website</center></h3>
    <p>The Scottish Great Dane Club Aims:</p>
    <!--Begin Aims-->
    <p>To enhance the profile of Great Danes in Scotland and the UK</p>
    <p>To advocate and encourage responsible dog ownership and promote excellence in breeding and exhibiting.</p>
    <p>To maintain the breed standard and uphold the values of the Scottish Great Dane Club and the Kennel Club.</p>
    <hr>
    <p span style="color:#6666FF;font-size=14px;font-family=Verdana";>For regular updates and additions to our website, visit our news page:<a href="http://scottishgreatdaneclub.co.uk/news.html">Club News</a></p><br><hr>
    <p>Visitor #<br><img src="http://homepages.plus.net/cgi-bin/count_dyno? bridgethyme_ss";></p>
    </div><br>
    </td>
    <!--End Contents-->
    
    <!Begin Links Box-->
    <td width=5% valign="bottom">
     <ul class="linksbox">
        <h4>Quick Links & Forms</h4>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/rulesregs2012.pdf" target="_blank">Rules & Regs</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/showdates2013.pdf" target="_blank">Show Dates</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/schedules.html">Schedules</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/membership.pdf" target="_blank">Membership</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/somandate.pdf" target="_blank">SO Mandate</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/sgdccriteria.pdf" target="_blank">Judging Criteria</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/sgdcjudging.pdf" target="_blank">SGDC Judging</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/bcjudging.pdf" target="_blank">BC Judging</a></li>
     </ul>
    </td>
    </tr>
    </table>
    <!End links Box-->
    <!End table-->
    
    <Begin table. Footer-->
    <table border="0" width=100% height=5% div class="footer" cellspacing="0">
    <tr><td>Scottish Great Dane Club &#xA9; 2012 Design by Shona Owens</td>
    </tr>
    </table>
    <!--End footer-->
    <!End Table-->
    
    </body>
    </html>
    Code CSS:
    .header {
    	background-image:url("images/Final2.jpg");
    	background-repeat:no-repeat;
    	background-position:center;
    	background-color:#FFFFFF;
    	margin:auto;
    	padding:10px;
     
    }
     
    .midborder {
    	background-image:url("images/SGDC Tartan Dark.jpg");
    	Background-repeat:repeat x;
    	padding:0;
    }
     
     
     
     
    h3 {
    	font-family:Verdana Arial;
    	font-size:14px;
    	color:#6666FF;
    	text-align:left;
    	padding:0px;
     
    }
     
    .content {
       	font-family:Verdana;
    	font-size:14px;
    	color:#000;
    	text-align:left;
    	padding:15px;
    }
     
    .clublinks {
    	font-family:Verdana Arial;
    	font-size:14px;
    	line-height:20px;
    	text-align:left;
    	list-style:none;
    	padding:10px;
    }
     
    .clublinks a {
    	color:#00008B;
    }
     
     
    .clublinks a:visited {
    	color:#00008B;
     
    }
     
     
    h4 {
    	font-family:Verdana;
    	font-size:12px;
    	color:6666FF;
    	text-align:center;
    	padding:0;
    }
     
     
     
    .linksbox {
    	font-family:Verdana Arial;
    	width:150px;
    	border:1px solid #C6DEFF;
    	font-size:14px;
    	line-height:20px;
    	text-align:left;
    	list-style:none;
    	padding:10px;
    }
     
    .linksbox a {
    	text-decoration:none;
    	color:#00008B;
    	font-size:14px;
     
     
    }
     
    .linksbox a:visited {  
    	color:#00008B;
     
    }
     
    .footer {
    	background-color:#C6DEFF;
    	font-family:Verdana Arial;
    	font-size:13px;
    	font-weight:bold;
    	text-align:center;
    	color:#000;
    	padding:0;
    }
    Last edited by Stevie D; Jan 30, 2013 at 06:21. Reason: Code tags added

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Could you provide an updated link? On this page:

    http://www.scottishgreatdaneclub.co.uk/

    you don't have the code you show above. You just have an unordered list (<ul>) with not sub uls.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, that's the home page (index.html) updated only. I've also removed the css file that calls my previous menu from this page only. I really appreciate this. Many thanks.

    Puzzle1 (Shona)

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    OK, the menu seems to be working now. Is all well now, or do you still see issues?

    Glad it's back again.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I only uploaded the menu after you said as I didn't want to work on the website live. The drop down part isn't working! Please help!! Thanks.

    Shona

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's working perfectly for me now. Make sure to refresh your browser / clear your cache etc. If that doesn't help, what browser are you using?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  15. #15
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I'm using IE 9 The menu works fine, till I put it into the website, that's why I am thinking there is something wrong with my code? Thanks.

    Shona


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
  •