Making a Simple, Responsive Drop-down Menu


Hey, this is Ralph. In this video I’d like
to make a response version of this horizontal navigation menu. [intro music] Okay. So in the previous video and the we did this little horizontal menu
and I just made a duplicate other with a something you are submenus for
all three categories and if you look at the video description
you can find this but I’d like to deal with this for a responsive layout so my head over to
my editor and in a work with this next menu here so this is good now gonna be mine now
have two into my CSS file I’ve actually already got the CSS rules
for the basics already set up and I just a copy and paste from my first
navigation service really nothing new here what I need focus on those them is the
mobile version so I’m gonna do in at media screen and max width personal do 600 pixels Annika some room to work now something else that I did this is
actually several bad years ago but back on this HTML file I do have the medoff you port in their
middle name viewport content equals with device with and I’ll said the initial
scale one cell that’s a pretty important step
especially with the Eagles device with but the CSS is gonna be pretty easy what
I really wanna do as I want to look at all the rules are used to create the widescreen version at this navigation
menu in figure out what I wanna have change so there’s a couple approaches there’s
you know you can work from big to smaller small to big with a
responsive design I’m going big to small so the things that I want to be the same
for both wide screen error screen I don’t have to
worry about those are okay so for instance my own ordered list is
still going to have a list I’ll type 9 on the mobile version so there’s no need
even bring that rule down but let’s go down to this rule here and
fact I’ll bring in now have to try to bring all of them here and I can just delete once lead saw the
species and and what ima do is look at things that
need to change for instance on my mobile layout I no
longer want these these menu items to be side by side I
want them to be one on top of the other probably not be room for to be side by
side now I can just delete outflow left because if I do it’s still gonna take on
characteristics from the widescreen version actually
have to cancel out the flute by doing float 9 so my list
items will no longer flute side by side so when I save this head over the browser imagery fresh
course no change here but let me go on a roll now we can see these list items are now
one on top of the other that I want to have happen position
relative is okay that doesn’t hurt anything by itself instead of margin-right: have 10 pixels
put a margin of four sides and a that’ll to override that
margin-top: so no big deal there let’s get down to
these anchors I still want them to be blocks but I don’t necessarily want to
be just 220 pixels goes a hundred percent remember my
anchors are inside of my list items list items that aren’t floating or don’t
have a with set are naturally gonna be as wide as they
can be so this is going to make my anchors pretty wide and I’ll go ahead knock down their
height a little bit 230 pixels someone save this browser refresh now
can see news anchors are much wider don’t we better have a perfect and get
there soon enough so um now my anchors are looking more like
what I’d like him to look like and I’ll be a little bit flexible here and of course months ago bigger they go
back to their horizontal layout now for something like background-color: I’m not changing that so I don’t even
need to reference step rule in my mobile styles on Harbor
background-color: that’s fine up since I’m not changing
anything without is get relevant now for my 100 list I’m no longer gonna be worried about positioning them
absolutely that was more critical when I had that horizontal menu layout so I need to cancel out the position in
to do that i’m gonna put in position ecstatic okay top and left really art a concern for me so I can a just two liters now watch what happens
when I save this and browser refresh there we go so now on hover on the main menu items my sub menu items the stretch up
underneath now this is actually it’s a little bit weird to look at in my
ear in my desktop browser here because he cannot IAF’s you can’t Harbor on a mobile app but if you go to this
web pages click on the link in the description there in few goad on your mobile device you’ll
realize that these don’t activate until click so it’s actually in pretty
good shape for mobile device so when you click on the main menu item
it’ll expand the submenu item with that a call on
hover so in effect i’m satisfied with this and a
girl had to wrap this up one up here now for slightly more panel fans here for a little bit more
professional navigation menus a lot of them will use a a little bit of
a javascript so that when you click on a button the
navigation menu will appear so we’ll try that another video the new
rule

5 Comments

Add a Comment

Your email address will not be published. Required fields are marked *