HTML and CSS RSS HTML and CSS RSS

CSS Version of this Javascript menu

Reply

•
•
Join Date: Mar 2009
Posts: 19
Reputation: Lib Auth is an unknown quantity at this point 
Solved Threads: 0
Lib Auth Lib Auth is offline Offline
Newbie Poster

CSS Version of this Javascript menu

 
0
  #1
May 14th, 2009
Hello there,

I have this script which I have edited and altered, to create a demo of what I want (the original coming from Dynamic Drive).

Is there a way to achieve this in CSS?

Thank you,
Regards,
Grant
Last edited by Lib Auth; May 14th, 2009 at 9:14 pm.
Attached Files
File Type: zip jstocss.zip (17.3 KB, 6 views)
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 818
Reputation: Airshow is on a distinguished road 
Solved Threads: 116
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: CSS Version of this Javascript menu

 
0
  #2
May 14th, 2009
Lib Auth,

Nice effect.

You can use CSS to style the menu differently if that's what you want.

You can't avoid Javascript for the animation and why would you want to? .... it's developed and working.

Airshow
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2009
Posts: 19
Reputation: Lib Auth is an unknown quantity at this point 
Solved Threads: 0
Lib Auth Lib Auth is offline Offline
Newbie Poster

Re: CSS Version of this Javascript menu

 
0
  #3
May 15th, 2009
Airshow,

Thank you for your reply.
If you look, the links and design of the script is in the Javascript. How would I move that into CSS??

Regards,
Grant
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 97
Reputation: itsjareds is an unknown quantity at this point 
Solved Threads: 12
itsjareds's Avatar
itsjareds itsjareds is offline Offline
Junior Poster in Training

Re: CSS Version of this Javascript menu

 
0
  #4
May 15th, 2009
CSS and JavaScript aren't interchangeable languages. They each are designed to do specific things. CSS is for styling the page, and JavaScript is for controlling your HTML dynamically (and for form validation).

CSS has some :hover effects that are similar to JavaScript's onMouseover, but you can't recreate a JS animation in CSS. The JavaScript looks fine, why do you need to change it?
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2009
Posts: 19
Reputation: Lib Auth is an unknown quantity at this point 
Solved Threads: 0
Lib Auth Lib Auth is offline Offline
Newbie Poster

Re: CSS Version of this Javascript menu

 
0
  #5
May 16th, 2009
I dont want to recreate the animation.

I want to do the styling i.e. the colours in CSS rather than Javascript
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 97
Reputation: itsjareds is an unknown quantity at this point 
Solved Threads: 12
itsjareds's Avatar
itsjareds itsjareds is offline Offline
Junior Poster in Training

Re: CSS Version of this Javascript menu

 
0
  #6
May 16th, 2009
Sure, it doesn't look very good compared to the JavaScript version though.

Here is a demo I made:

index.html
HTML Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3.  
  4. <link rel="stylesheet" href="styles.css"/>
  5.  
  6. </head>
  7. <body>
  8.  
  9. 	<div id="menu">
  10. 		<ul class="dropdown">
  11. 			<li><a href="http://www.example.com">Test</a></li>
  12. 			<li><a href="http://www.daniweb.com">DaniWeb</a></li>
  13. 			<li><a href="http://www.blah.com">Blah</a></li>
  14. 			<li><a href="http://www.wurbo.com">Wurbo</a></li>
  15. 			<li><a href="http://www.spogg.com">Spogg</a></li>
  16. 			<li><a href="http://www.google.com">Google</a></li>
  17. 			<li><a href="http://www.yahoo.com">Yahoo</a></li>
  18. 			<li><a href="http://www.ubuntu.com">Ubuntu</a></li>
  19. 			<li><a href="http://www.w3schools.com">W3Schools</a></li>
  20. 			<li><a href="http://www.spogg.com/KnifeySpooney">KnifeySpooney</a></li>
  21. 			<li class="toggle">Toggle menu</li>
  22. 		</ul>
  23. 	</div>
  24.  
  25. </body>
  26. </html>

styles.css
CSS Syntax (Toggle Plain Text) 
  1. 	* {
  2. 		padding: 0;
  3. 		margin: 0;
  4. 	}
  5. 	body {
  6. 		behavior: url("csshover.htc");
  7. 		text-align: center;
  8. 	}
  9. 	#menu {
  10. 		background-color: #D3D3D3;
  11. 		top: -205px;
  12. 		width: 200px;
  13. 		position: relative;
  14. 		margin: 0 auto;
  15. 		text-align: left;
  16. 	}
  17. 	#menu:hover {
  18. 		top: 0px;
  19. 	}
  20. 	.dropdown {
  21. 		width: 100%;
  22. 	}
  23. 	.dropdown li {
  24. 		padding-left: 3px;
  25. 		list-style: none;
  26. 	}
  27. 	.dropdown li:hover {
  28. 		background-color: #ADD8E6;
  29. 	}
  30. 	.dropdown li a {
  31. 		height: 20px;
  32. 		color: #000000;
  33. 		width: 100%;
  34. 		display: block;
  35. 	}
  36. 	.toggle {
  37. 		border-top: 1px solid black;
  38. 		margin-top: 4px;
  39. 		text-align: center;
  40. 		cursor: pointer;
  41. 	}

For the CSS :hover property to work in IE, you have to add a script to it (see the property on body - behavior: url("csshover.htc"); )

You can download that file here. (packed JS IE CSS extension). Read about it here.


I made a demo of it here, but it may not be up some day if I remove it from my web hosting.


The CSS version of your menu is possible but not practical. I posted the code for reference.
Last edited by itsjareds; May 16th, 2009 at 8:47 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 818
Reputation: Airshow is on a distinguished road 
Solved Threads: 116
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: CSS Version of this Javascript menu

 
0
  #7
May 16th, 2009
LIb,

Yes, it appears that you can establish styles in CSS but there are no instructions on how to do so. The Read Me file indicates that you should contact the author to find out how (email address provided). It is not clear why he chose not to include instructions with the distribution.

*** HOWEVER ***

I have managed to penetrate a rather convoluted system. This what to do:

Level 1
Styles that you will most likely want to change are already in CSS.
  1. Backup demo.htm .
  2. Open demo.htm in your favourite text editor.
  3. Edit any of the four styles in this file's style sheet to change the appearance of the menu.
  4. Save, then launch demo.htm in your browser (etc. etc. until you are satisfied).

Level 2
If you need to change aspects that were not addressed by the Level 1 method, then there appears to be is a built-in mechanism for saving the code-generated stylesheet in editable form. I have not explored this in its entirety but the procedure appears to be as follows:
  1. Open the file menuItems.js
  2. Edit the line design_mode:false, //... to design_mode:true, //..... (but don't close the file yet).
  3. View demo.htm in your browser.
  4. You will now see the demo page with the code-generated stylesheet overlaid.
  5. Right-click > select all, then copy to clipboard.
  6. Paste into the top of the stylesheet in demo.htm.
  7. In menuItems.js (you didn't close it, remember?), edit user_defined_stylesheet:false, //... to user_defined_stylesheet:true, //...
  8. Edit the line design_mode:true, //... back to design_mode:false, //.....
You now have a complete(?) working CSS stylesheet under your control but suggest caution as there may be things at Level 2 that you should only touch if you feel you really know what you're doing.

Of course, you may need to change the graphic so you will need to edit or create your own versions of image.bmp and clickhere.bmp(?) (in eg, Photoshop). I suggest working with copies of the original(s) rather than creating your own from scratch, at least to begin with.

I think that's about it. Good luck.

Airshow
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 818
Reputation: Airshow is on a distinguished road 
Solved Threads: 116
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: CSS Version of this Javascript menu

 
0
  #8
May 16th, 2009
Just noticed, at level 2, step 5, don't select all. There's a bit at the bottom you don't want (at least not here).

Comments are included to help see where the stylesheet stops and the extra bit starts.

AS
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC