PDA

View Full Version : how to do this menu effect?


fattat
02-08-2009, 12:47 PM
how to do this effect?
when mouse rollover it ,
the menu will become bigger

http://img10.imageshack.us/img10/134/picture2vd2.png (http://imageshack.us)

http://img10.imageshack.us/img10/6366/picture1jk8.png (http://imageshack.us)

urbanrays
02-08-2009, 04:42 PM
Hi

Try this link here
http://www.cssplay.co.uk/menus/magnifier2.html

Should help

fattat
02-09-2009, 11:34 AM
thank for ur help

fattat
02-09-2009, 01:38 PM
Hi

Try this link here
http://www.cssplay.co.uk/menus/magnifier2.html

Should help



http://img11.imageshack.us/img11/4854/picture1vv5.png (http://imageshack.us)

why i can find the tutorial (demonstration) and the css code for the file?
can show me where is it??

urbanrays
02-09-2009, 01:56 PM
you have to look at the source code and take it from their.

Just another thought on the rollover effects you want, have you got the web address of the site you got these from so we can have a look at the code it may not of been done in css

fattat
02-09-2009, 02:05 PM
i not very understand?
you mean take the source code from the browser menu view source??

http://img18.imageshack.us/img18/3150/picture2ps8.png (http://imageshack.us)

urbanrays
02-09-2009, 02:14 PM
this is the css code
#enlarge {padding:0; margin:4em auto; list-style-type:none; width:240px; height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px; position:relative;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent; overflow:hidden; position:relative;}
#enlarge li a img {width:100%; height:100%; border:0;}
#enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px; height:80px; z-index:100;}

and your htm code is this
<h2>Another magnifier menu</h2>

<ul id="enlarge">
<li><a href="#one"><img src="lines/image1.gif" alt="image 1" title="image 1" />Image 1</a></li>
<li><a href="#two"><img src="lines/image2.gif" alt="image 2" title="image 2" />Image 2</a></li>
<li><a href="#three"><img src="lines/image3.gif" alt="image 3" title="image 3" />Image 3</a></li>
<li><a href="#four"><img src="lines/image4.gif" alt="image 4" title="image 4" />Image 4</a></li>
<li><a href="#five"><img src="lines/image5.gif" alt="image 5" title="image 5" />Image 5</a></li>
<li><a href="#six"><img src="lines/image6.gif" alt="image 6" title="image 6" />Image 6</a></li>
</ul>

you will have to use the images of your choice

Hope this helps

fattat
02-09-2009, 02:40 PM
Ok,,

thank for ur help!!!

fattat
02-09-2009, 02:54 PM
sorry..

still got one question

the menu is fine now
but how to link the menu to other homepage??

http://img516.imageshack.us/img516/562/picture4xx0.png (http://imageshack.us)
http://img516.imageshack.us/img516/2215/picture5zu4.png (http://imageshack.us)

fattat
02-09-2009, 02:55 PM
how to add the link??

urbanrays
02-09-2009, 03:10 PM
how to add the link??

If you want links change the #one to index.htm, etc etc

<a href="#one">

domedia
02-09-2009, 04:13 PM
Seriously fattat, if you cannot add a link, you need to go back to the first chapters in the manual. This forum is not an excuse for getting the basics down :)