Dreamweaver Tutorial : Pure CSS Drop down menu , Part -1

Click the link down below for Part 2
http://www.youtube.com/watch?v=mADc7tJxlaQ


do check out my website
http://qualitylessons.net

Pure CSS Drop down menu
Mohit Manuja

---

Closed Caption:

how many champs my name is more than
guys
i'm going to show you how to make a drop
down menu in
dreamweaver cs5 . 5 but this drop-down
menu guys does not use the Spry
functionality does not use JavaScript at
all
it's a year old CSS menu bar in fact
guys have a look out your i'm in the
live view and I've already done making
this many what if I hover over
ok any of these menu items you can
actually see that it drops in very
nicely and when i go over the different
items you can see that the background
color actually changes
so this many of our guy is has been done
entirely by only through our CSS so what
I'm going to do now is I'm going to
create a fresh while and we'll see how
this was actually done
nice remember since this is a pure CSS -
about it loads faster and it opens up or
drops down faster
so the speed is the key out here
all right so let me start creating one
from scratch i'm going to say a new file
layout none
let me say create right ok guys the
first thing I will do is I'll say insert
also layout objects and said do time
ok I look the idea and la get an idea of
menu
ok let mr. always say okay cool let me
remove the texture and the middle right
let me go to the court area and then let
me crunch everything that is above the
body tag
right
let me put in some comment out
and off main menu do right
ok
now guys what he'll be doing is I'll be
dropping in a you well opening time
right
and unordered list opening tag and it
needs to have a closing as well
all right let me put in a comment but
says that at the end of the between us
time
so that's and
halt mein you have time
right
guys have a look out here that I'm in
the classic workspace and he was looking
get back to the court area and now that
we have the opening of the closing UL
tags
obviously we should have the ally taxes
what
so we have the opening a light hang out
here all right after which I wish would
want to you know insert a link i'll be
using the href attribute guys I'm
creating a null link
ok temporarily since i don't have one
ready and let me give it a title out
here let me close the anchor tag up
right now guys
what i'll be doing is inside the UL tags
we have the LI tag
maybe this is the opening a lie tag that
they close it up out here as well let me
pass in a comment with says
closing
the main
a lot of time
right
next I'm going to nest another UL tag in
the LI tag and before that let me just
hit the refresh button to show you what
has happened so far right now let me
next a UL tag out here
now the opening this should be the
closing and let me pass in a comment
with says closure of inner you will tag
correct
let me get some space and in the nested
he will tags guys doing
let me first click the refresh button
i'm going to create a few more Li tags
i'm going to say opening a live tag and
then using the anchor tag once again the
href attribute
ok temporarily putting it to knowledge
since we don't have one ready
just for the testing purpose ok and then
let me say link one night and let me
close the anchor tag up not they will
and let me also close the ally tag right
then guys what I'm going to do is I'm
one hour click the refresh button see
that is how things look like right now
cool let me copy line number 13 control
C and let me paste it three more times
control we control we and our control we
are cheers
right
so again let's see what exactly we have
done let me know a few of you know a
quick recap
also before that have a look out here
how things look like right now so we
created the division we gave it a 90
menu
ok we close the dough out here inside
which guys I create an opening UL tag
I close it out here then i created the
main ally tag
I closed it out here and then we nested
you will tags inside which I have for Li
tags and the result is this guy's this
is the result
so home is the main ally and these are
mastered allies inside it
thank you the problems next guy is I'll
make sure that my cursor is blinking in
line number nine we have the dew on the
ID for which is menu that we go again
click on the new CSS rule button ok the
contextual selector set to idea with the
spine problems there
let me make sure that the new rule that
i'm defining does not go inside the
document does not become an internal
luna
rules as it was happening earlier that
we say a new style sheet file basically
an external CSS file let me say okay let
me create down menu CSS my menu CSS
ok so so the stylesheet cascading style
sheet for menu
let me say it up in my local site folder
ok after which i'm going to go to the
box category I'm going to define the
padding as you
the margin:0 as well okay let me start
always say okay
also guys have been defined a bit out
here i'm aware of the with let me say
688 pixels and in fact let me set the
right and the left margins to water
since i already have been my
calculations
let me start with say okay right let me
go to the live you are not much has
changed anyways because of the life you
know
let me create one more rule
let me click where we have the opening
UL tag let me click on the plus button
ok so the new rule will target it's a
comp own room guys the context sure
selectors from bone and this rule will
be targeting the UL tags the you
elements that are within the elements
with the ID menu right
which is fine and notice out here guys
that the rule will be getting saved
itself in the my menu CSS . CSS external
style sheet file which is great
i'm going to say ok and again this time
let me straight away go to the box
category
ok let me
say the margin is 0 and the padding:0 as
well and say okay right
and let me go to the live view and
notice the changes that are taking place
guys
ok next guys I'll be clicking out here
we where we have the opening li tag
let me click on the plus button ok now
the new rule which is a compound rule
ok the contextual selector type is
compound the other types are tag ID and
class will be targeting a lie within the
UL within menu which is not a problem at
all
and notice out here that the rule is
getting us itself saved in the my manual
CSS . CSS file which is fine let me say
okay straight away
okay let me start defining the rule then
let me get a background color of let's
say a pound sign not triple six right
let me go to the box category let me set
the float to a left at the same time
guys
let me also go to the positioning
category let me set the position to our
relative
we didn't know that's extremely
extremely one guys
i'll be using i'll be nesting on an
absolute early position element inside
the relative element that was extremely
one guys
I had to do that and we will check it
out later why we had to do that but it's
very important that you set the menu ull
I to position of relative good
so let's see if I'm actually done
background to pull six
I need to give the board as well so let
me go in with a solid one pixel off
let's say
a pound sign Triple C let me say ok and
how I look guys how does how do things
actually look like right now except that
i can see the bullets even now
so what I'll do is I'll go back to the
rule menu LOL i go to the list category
and say list i'll type not let me say
okay right let me show you our preview
google chrome after saving the changes
to the file
let me call it my menu or my top
no menu or whatever or whatever
ok let's save the changes and how it
look out here how things look like right
now right
the things will get better and better
let me go back to Dreamweaver
ok and this time
in the cord you let me click very happy
I
let me look online number 16 guys
rather rather let me click and line
number 17 way we have the anchor tag or
15
ok has a lot of 15 let me click on the
plus button ok
the new rule will be targeting the
anchor tags which I was in LA which I
was in the world which I was in many
which is absolutely alright the
contextual selector is a compound which
is great
the rule will save itself in an external
style sheet farms - yes . yes it's just
cool let me say okay now this is a very
important room guys
a lot will be happening out here let me
set the form family - let's say this one
okay let me set the form sighs - let's
say 14 right let me set the font color
to a light
ok by default all anchor tags are blue
in color or link elements of blue and
column changing it to a color white
ok they are by default underline as you
can see out here i'm going to remove
that i'm going to say
text-decoration:none
ok let me also go to the blog category
I'm going to make sure that the display
is a block
ok that'll ensure that you can click
anywhere on the block and will be a link
not just the word itself ok let me go
back to the type category
let me set the line height to us 30
simply because when i go to the box
category i'm going to set the width and
the height to be a 150 x 30 respectively
that will make sure that the text will
align itself are centrally vertically
let me go back to the block category let
me make sure that that even horizontally
the text alignment is center
right and yep
let me say okay let me have a look out
here guys how things look like right now
ok let me save the changes up our
previous google chrome
all right right
ok
next guys
let me make sure that i'm clicking on
line number 16 way we have the nested
you ela tag you over the new well line
number 16
ok let me click on this plus button and
let me say that the new rules will be
targeting you well with the new world
which is inside me which is fine
have a look out here the contextual
selected set to compound which is fine
and the rule will get saved in the my
menu CSS . CSS file which is great
let me start with say okay and let me go
to the positioning and now guys have a
lookout sure i'm going to set the
placement to an absolute now this is
where all the magic happens
we are placing an absolute element in a
relative element and see how it actually
affects the whole thing let me sort of
us say okay and have a look out your
guys this is exactly what i was looking
to do
let me show you a preview in Google
Chrome there you go
alright so next what i'll be doing is
that was the reason why i made sure that
my only rule menu you will ally
I was position to our relative had it
not being relative had been static or
not defined if it's not defined at
static see what happens
so you need to keep many ull I to
relative and then menu ulul to an
absolute at the same time guys
I would not want these links like one
link 1 think 1 think 1
whatever you show up unless and until
somebody who was over home
so what I'm going to do is I'm going to
go back to this rule menu ul ul and now
we're going to the position in category
i'm going to set the visibility to a
hidden let me say okay
and notice what has happened out here
okay so guys since this tutorial has
actually run into many minutes I'll be
terminating this tutorial here only to
join you in the next part of the same
tutorial i hope you have enjoyed it so
far you learn something and I'll see you
very soon know with the next part of
this tutorial
see you soon catches him