How to make roll over like microsoft.com

I would like to make roll overs, just like microsoft has done that is if u move ur mouse  over HOME or Micorsoft  or... U see a drop down menu with links how to do that. and also the coulmen roll over
fmuftiAsked:
Who is Participating?
 
klykkenConnect With a Mentor Commented:
fmufti;
sure i can, although i think the one from projectseven definately is the best.
http://www.mikejen.com/Resources%20stuff/Making%20a%20Fly%20Out%20Menu.htm

This page also have links to additional pages that might be of help. Likt his one which is another tutorial doing the microsoft menu:
http://kjostudio.tripod.com/menu/tutorial.html

the first tutorial as pdf:
http://www.mikejen.com/Resources%20stuff/Making%20a%20Fly%20Out%20Menu.pdf

..and looking through the comments I remember how important it is to seperate java from javascript and knowing that they are not the same thing :-)
--
klykken
0
 
RGB-VisualsCommented:
The way I do that is to use a CSS style sheet. Dreamweaver help explains what all the options are.

It you want a code for a drop down menu try www.dhtml.com
they have codes and help to set it up.

need more details?
0
 
fmuftiAuthor Commented:
Can u be specifc as to how can we do it in Dreamweaver, if possible  step by step
I 'll be gretful as I am not an expertin easy stepsstep by step
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
fmuftiAuthor Commented:
Also I dont know much of HTML
0
 
RGB-VisualsCommented:
Step 1

Right click CSS Style> new style

Step 2

Type> use css selector
Selector> a:active

Define in> (here you have the option of saving the css style in the document or as a file. It's better to save it as a file, then other documents can use it as well.)
so pick the the top option, new style sheet file.

Step 3
hit OK, now it will ask you to save the sheet.

Step 4
here is where you tell it what to look like.
(for more in this part hit the help button, it brings up html page from your hard drive, with all the setup options)

Step 5
repeat this 3, but step 2 will be different now.
for the Selector, pick next after a:active and tell it to Define in the style just saved (it should be in the list)

some background info
these links have 4 parts
a:active - what you see when the link is active
a:hover - what you see when you move over the link
a:link - what link looks like normally
a:visited - what link looks like after you've been to the linked site

I hope this helps
good luck

Steven
0
 
RGB-VisualsCommented:
oops, fix two mistakes

step 1
Right click (anywhere on a doc, in dreamweaver) CSS Style> new style

Step 5
repeat this 3 times, but step 2 will be different each time now.
for the Selector, pick the second one down (the third time pick the third one down and so on)

then tell it to Define in the style just saved (it should
be in the list)

I hope this helps
good luck

Steven
0
 
fmuftiAuthor Commented:
Hi
What u have writetn was just a simple way of modifying links by CSS, that I am already doing but on the link a:hover how to drop amenu???that is my question. making links cahnges with CSS I already new, so may be we can step forward
0
 
RGB-VisualsCommented:
CSS aren't used for most drop menus.
I don't know how Microsoft has done their menus, but
I know how to do one like it, go www.bac.qld.edu.au
if you like those menus I can tell you how to set them up.

In setting up most drop down menus, it help if you know a bit about java.

If you don't like the type of menus at www.bac.qld.edu.au you could try looking at Macoromdia Excahange (http://www.macromedia.com/exchange/).
They have over 400 Extensions for Dreamweaver, all free all you need is macromedia ID (also free).

That help?

Steven
0
 
fmuftiAuthor Commented:
This site www/bac.gld.edu.au doesnt work its displays a message saying
               Offline!
The DynIP customer you are trying to reach is
not connected to the Internet right now
0
 
klykkenCommented:
css _is_ used for dropdown menus. It is just a more advanced way of using them (and combinding them with javascript).

Go to: http://www.projectseven.com/dreamweaver/index.htm
Click the tutorial link on the top and there you will find a tutorial how to make a microsoft menu, with dreamweaver.

Good Luck :-)
--
klykken
0
 
fmuftiAuthor Commented:
I had already downloaded that one and working on it.
So suggest me some other so that I can reward u with the points.
0
 
fmuftiAuthor Commented:
Thanx
0
 
fmuftiAuthor Commented:
Can I contact u again if I have any problem as I may not have time to work on the tutorial for 2-3 days??
0
 
fmuftiAuthor Commented:
There are few points which I could not understand. please explain them to me.
1. Why all layers are palced at the same position on the page( Top left)
2. Why the transparent GIF is larger than the layer
     a. By what proportion it should be larger
     b. What if the Transparent GIF Layer is of the same size of Layer-SANP
3. Why there is a tranparent GIF(shim ) in the first cell of the five coulm table.
4. How to give dimensions to image so that we can user PRESETS
0
 
fmuftiAuthor Commented:
klykken  WHERE ARE U???
0
 
klykkenCommented:
fmufti,
I am not sure which document you are speaking about. If this is for yuor own home page, I need to see the source, either by you giving me the url, or give me the code you are using.
Or if this is concerning one of the tutorials, please specify which one.
--
klykken
0
 
fmuftiAuthor Commented:
I am talking of Project seven drop down menu tutorial
0
 
fmuftiAuthor Commented:
Project VII seems to have replaced the previous Snap and Auto layer Tutorial with their lates one, so I am going to read this one, So will u be available  after the weekend to discuss if at all there is any help I need ?????
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.