Create a slide open menu

Page 1 of 1

7 Replies - 1013 Views - Last Post: 26 November 2012 - 01:50 AM

#1 toad87  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 139
  • Joined: 21-May 12

Create a slide open menu

Posted 18 November 2012 - 11:12 PM

Hi guys! I'm doing a homework assignment for intro to web development. It's mainly HTML5 and CSS3. My teacher does not expect me to do any javascript work, but I would really like to make a slide menu (one that pops out when you're hovering over the button).

I've googled and binged, but all the lessons involve nesting unordered lists, which would be fine except I already created my menu, using photoshop and slicing + rollover images.

The code photoshop came up with gave me a table of images. I don't know how I would go about putting a <ul> in a table...I've tried and it just moves my images down...

Basically I want a menu to pop open to the right when I'm hovering over one of the button icons.

Any help would be greatly appreciated.

Thanks.

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Guitar Centre</title>
	<link href="mystyle.css" rel="stylesheet" type="text/css">
	
	

</head>
<body>

	<div class="header">
	A TRIBUTE TO THE GUITAR
	</div>
	<div class="wrapper">
		<div class="menu">
				<table id="Table_01" width="200" height="500" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td>
							<img src="images/menubar_01.gif" width="200" height="20" alt="">
						</td>
					</tr>
					<tr>
						<td><a href="#">
							<img src="images/menubar_main_on.jpg" width="200" height="30" alt=""/>
							</a>
						</td>
					</tr>
					<tr>
						<td>
							<img src="images/menubar_03.gif" width="200" height="13" alt=""></td>
					</tr>
					<tr>
						<td><a href="#">
							<img src="images/menubar_history_off.jpg" width="200" height="33" alt="" onmouseover="this.src='images/menubar_history_on.jpg';"
							onmouseout="this.src='images/menubar_history_off.jpg';"/>
						</td>
					</tr>
					<tr>
						<td>
							<img src="images/menubar_05.gif" width="200" height="27" alt=""></td>
					</tr>
					<tr>
						<td>
							<img src="images/menubar_about_off.jpg" width="200" height="32" alt="" onmouseover="this.src='images/menubar_about_on.jpg';"
							onmouseout="this.src='images/menubar_about_off.jpg';"/>	
						</td>
					</tr>
					<tr>
						<td><a href="#">
							<img src="images/menubar_07.gif" width="200" height="22" alt="">
						</td>
					</tr>
					<tr>
						<td>
							<img src="images/menubar_guitarlegends_off.jpg" width="200" height="57" alt="" onmouseover="this.src='images/menubar_guitarlegends_on.jpg';"
							onmouseout="this.src='images/menubar_guitarlegends_off.jpg';"/></td>
					</tr>
					<tr>
						<td>
							<img src="images/menubar_09.gif" width="200" height="30" alt=""></td>
					</tr>
					<tr>
						<td>
							<img src="images/menubar_onlineteachers_off.jpg" width="200" height="53" alt="" onmouseover="this.src='images/menubar_onlineteachers_on.jpg';"
							onmouseout="this.src='images/menubar_onlineteachers_off.jpg';"/></td>
					</tr>
					<tr>
						<td>
							<img src="images/menubar_11.gif" width="200" height="28" alt=""></td>
					</tr>
					<tr>
						<td>
							<img src="images/menubar_sitemap_off.jpg" width="200" height="29" alt="" onmouseover="this.src='images/menubar_sitemap_on.jpg';"
							onmouseout="this.src='images/menubar_sitemap_off.jpg';"/></td>
					</tr>
					<tr>
						<td>
							<img src="images/menubar_13.gif" width="200" height="126" alt=""></td>
					</tr>
				</table>


			
		</div>
		
	
		
		
		
		<div class="content">
		Little by little, inch by inch, we build a garden.
		</div>
	
	</div>
		
	<div class="footer">
		
	</div>
</body>
</html>
		
		
			





img{
margin: 0;
padding: 0;
}
body{
				margin: 0;
				padding: 0;
				width: 99%;
				background-image: url('images/background.jpg') ;
				background-repeat: no-repeat;
					
				position: absolute;
				top: 10px;
				color: #709093;
				font-family: calibri, verdana, sans-serif;
				
				
			}
			
		.wrapper{
				margin: auto;
				width: 70%;
				padding: 0;
				
				
				
				
				}
		
		.header{
				position: relative;
				color: white;
				background-color: #black;
				margin: 45px auto 45px auto;
				width: inherit;
				height: 125px;
				padding: 0;
			
				height: 100;
				text-align:center;
				font-weight: bold;
				font-size: 80px;
				
				
				
				}
	
		
		.menu{
		position:fixed;
		top:227px;
		left:120px;
		width: 200px;
		height: 500px;
		background: black;
		background-color:#1C1C21;
		border: 1px solid white;
		
		padding:0;
		margin:0;
		white-space:nowrap;
		list-style-type:none;
		}
		
		.menu li{
		
		}
		
		.menu li a{
		font-size: 30px;
		padding:0;
		text-decoration:none;
		float:left;
		border: 1px solid black;
		width:200px;
		color:white;
		}



			
		.content{
				position: relative;
				background-color:#353535;
				border:1px solid black;
				opacity:0.6;
				filter:alpha(opacity=60);

				padding: 0;
				margin: 20px auto 15px auto;
				width: inherit;
				height: 1200px;
				
				text-align: center;
				font-size: 15px;

				box-shadow: 10px 10px 1px #222222;
			
				

			}
			
			.artistName{
				width: 80%;
				margin: 15px auto 15px auto;
				position:relative;
				top: 5px;
				height: 30px;
				margin-left: 20px;
				text-align: left;
				font-size: 35px;
				font-weight: bold;
				
				
				
				
			}
			
			
			#mainImg{
				width: 65%;
				margin: 35px auto 20px auto;
				height: 400px;
				background-color: black;
				
				
			}
				
			#mainPar{
				width: 95%;
				margin: 20px auto 25px auto;
				height: 100px;
				
				
				
			
			}
				
		
		.footer{
				position: relative;
				
				background-color:#1C1C21;
				border:1px solid black;
				opacity:0.6;
				filter:alpha(opacity=60);
				margin: 20px auto 15px auto;
				padding: 0;
				width: 49%;
				height: 30px;
				
			
				
			
			
			
			}


Please excuse the errors in my code...this really is just a beginner assignment...

Is This A Good Question/Topic? 0
  • +

Replies To: Create a slide open menu

#2 toad87  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 139
  • Joined: 21-May 12

Re: Create a slide open menu

Posted 18 November 2012 - 11:42 PM

Here's a link:

http://students.bcit...oject/home.html

As you can see, I've kind of copied another java/css code...didn't work very well...
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2894
  • View blog
  • Posts: 7,544
  • Joined: 08-June 10

Re: Create a slide open menu

Posted 19 November 2012 - 04:02 AM

View Posttoad87, on 19 November 2012 - 07:12 AM, said:

I've googled and binged, but all the lessons involve nesting unordered lists, which would be fine except I already created my menu, using photoshop and slicing + rollover images.

well, it seems that most developers prefer to use unordered lists instead of sliced image tables. (besides that fact that tables should not be used for layout anyway).

so personally I doubt that you will find anything useful when you want to keep the image tables.

for a relatively simple menu system you can check out the Suckerfish Dropdown (the mother of CSS dropdowns), which would require minor modifications to make it horizontal. (I think Eric Meyer has made one demo).

if you want to use animation, you’ll probably end up using jQuery (or another JS framework), but you would need to check their documentation for such stuff (though I think they’re also based on the list approach).
Was This Post Helpful? 0
  • +
  • -

#4 toad87  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 139
  • Joined: 21-May 12

Re: Create a slide open menu

Posted 19 November 2012 - 11:55 AM

What do you think of just using my button images in an unordered list? The images would still swap with a onmouseover script in the img tag. But the image
would be embedded in the top ul.

Do you think that would work?

This post has been edited by toad87: 19 November 2012 - 12:08 PM

Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2894
  • View blog
  • Posts: 7,544
  • Joined: 08-June 10

Re: Create a slide open menu

Posted 19 November 2012 - 01:17 PM

don’t know because I can’t really imagine how you want it to look like.
Was This Post Helpful? 0
  • +
  • -

#6 toad87  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 139
  • Joined: 21-May 12

Re: Create a slide open menu

Posted 25 November 2012 - 01:13 AM

I did it!!! But it needs a little tweak that I don't know how to do...
I got a submenu to open when the menu is clicked (i could change it to mouseover later) but when I move mouse over to the submenu, it disappears...

This is probably a very common problem...but take a look at my code.


Javascript:

	<script type="text/javascript" language="javascript"> 
	<!-- 
	function change(menuname) { 
	sub = document.getElementById(menuname); 
	if(sub.style.display == "") 
	sub.style.display = "none"; 
	else 
	sub.style.display = ""; 
	} 
	
	function undochange(menuname) {
	sub = document.getElementById(menuname); 
	if(sub.style.display == "") 
	sub.style.display = "none"; 
	
	
	} 
	//--> 
	</script>



CSS:
#sub1{
		}
		
			#legendssubmenu{
			
			position:fixed;
			top:370px;
			left: 377px;
			width:150px;
			height:182px;
			background-color: #414141;
			border:1px solid white;
			z-index: 100;
			margin: 0;
			padding:0;
			}
			
				#legendssubmenu ul{
				margin:0;
				padding:0;
				list-style: none;
				font-size: 20px;
				color: white;
				border: 1px solid white;
				
				}
				
				#legendssubmenu ul li{
				padding:0;
				margin:0;
				border-top: 1px solid #1C1C21;
				border-bottom: 1px solid #1C1C21;
				}
				
				#legendssubmenu ul li a{
				display: block;
				padding: 5px 0 5px 5px;
				margin: 0;
				text-decoration: none;
				color: white;
				}
				
				#legendssubmenu ul li a:hover{
				background-color:#1C1C21;
				color: grey;
			
				}
				
				#legendssubmenu ul li a:active{
				background-color:#1C1C21;
				color: grey;
				}



HTML:

<a href="#" onclick="change('sub1');" onmouseout="undochange('sub1');">
						<img src="images/menu/rocklegends_off.gif" width="200" height="66" alt=""
						onmouseover="this.src='images/menu/rocklegends_on.gif'" onmouseout="this.src='images/menu/rocklegends_off.gif'">
						</a>



<div id="sub1" style="display:none">
		<div id="legendssubmenu">
			<ul>
				<li><a href="johnlennon.html">John Lennon</a></li>
				<li><a href="jimihendrix.html">Jimi Hendrix</a></li>
				<li><a href="ericclapton.html">Eric Clapton</a></li>
				<li><a href="chuckberry.html">Chuck Berry</a></li>
				<li><a href="freddymercury.html">Freddy Mercury</a></li>
			</ul>	
		</div>
		</div>



Any ideas on how to change my javascript code to keep the submenu open when i'm hovering my mouse over it?

Here's my site so far: http://students.bcit...oject/home.html

click on "Rock Legends" and "Rock Lessons" to see the submenu.

This post has been edited by toad87: 25 November 2012 - 01:20 AM

Was This Post Helpful? 0
  • +
  • -

#7 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 83
  • View blog
  • Posts: 113
  • Joined: 14-October 12

Re: Create a slide open menu

Posted 25 November 2012 - 02:37 AM

Nevermind to this. Found out it only works on one. Back to the drawing board.

This post has been edited by IJET: 25 November 2012 - 02:44 AM

Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2894
  • View blog
  • Posts: 7,544
  • Joined: 08-June 10

Re: Create a slide open menu

Posted 26 November 2012 - 01:50 AM

horizontal CSS menu from Eric Meyer: http://meyerweb.com/...menus/demo.html
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1