Member Avatar for Lib Auth

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

jstocss.zip (17.29 KB)
  • 3 Contributors
  • 7 Replies
  • 98 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

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

Member Avatar for Lib Auth

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

Member Avatar for itsjareds

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?

Member Avatar for Lib Auth

I dont want to recreate the animation.

I want to do the styling i.e. the colours in CSS rather than Javascript

Member Avatar for itsjareds

Sure, it doesn't look very good compared to the JavaScript version though.

Here is a demo I made: index.html 

<html>
<head>

<link rel="stylesheet" href="styles.css"/>

</head>
<body>

	<div id="menu">
		<ul class="dropdown">
			<li><a href="http://www.example.com">Test</a></li>
			<li><a href="http://www.daniweb.com">DaniWeb</a></li>
			<li><a href="http://www.blah.com">Blah</a></li>
			<li><a href="http://www.wurbo.com">Wurbo</a></li>
			<li><a href="http://www.spogg.com">Spogg</a></li>
			<li><a href="http://www.google.com">Google</a></li>
			<li><a href="http://www.yahoo.com">Yahoo</a></li>
			<li><a href="http://www.ubuntu.com">Ubuntu</a></li>
			<li><a href="http://www.w3schools.com">W3Schools</a></li>
			<li><a href="http://www.spogg.com/KnifeySpooney">KnifeySpooney</a></li>
			<li class="toggle">Toggle menu</li>
		</ul>
	</div>

</body>
</html>

styles.css 

* {
		padding: 0;
		margin: 0;
	}
	body {
		behavior: url("csshover.htc");
		text-align: center;
	}
	#menu {
		background-color: #D3D3D3;
		top: -205px;
		width: 200px;
		position: relative;
		margin: 0 auto;
		text-align: left;
	}
	#menu:hover {
		top: 0px;
	}
	.dropdown {
		width: 100%;
	}
	.dropdown li {
		padding-left: 3px;
		list-style: none;
	}
	.dropdown li:hover {
		background-color: #ADD8E6;
	}
	.dropdown li a {
		height: 20px;
		color: #000000;
		width: 100%;
		display: block;
	}
	.toggle {
		border-top: 1px solid black;
		margin-top: 4px;
		text-align: center;
		cursor: pointer;
	}

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.

Member Avatar for Airshow

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

Member Avatar for Airshow

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.