HTML/CSS Tutorial – How to Create a Navigation Bar with a Dropdown – Part 2 [w/ subs]



00:00:03 – [Music]
00:00:10 – hello everybody welcome back to my first
00:00:14 – HTML and CSS tutorial in this video I
00:00:17 – will be showing you how to create a
00:00:19 – horizontal navigation bar with a drop
00:00:23 – down menu in the last video where we
00:00:27 – left off was we had created our logo
00:00:30 – we've created our navigation bar of
00:00:33 – course it doesn't look like a navigation
00:00:35 – bar and the drop down doesn't work and
00:00:36 – nothing is stylized which is why the
00:00:39 – next thing we're going to be doing is
00:00:40 – adding some CSS to the code which we yet
00:00:44 – need to create so open your file go back
00:00:50 – in the head right after the title create
00:00:53 – a new tag which will be our style tag
00:00:57 – close the tag add a little bit of space
00:01:00 – there and this is where all of our
00:01:04 – styles and go now this isn't really
00:01:06 – necessary you don't have to do this but
00:01:09 – I like to sort of organize my style so I
00:01:12 – use comments to do so in the way you
00:01:15 – comment in CSS or cascading style sheets
00:01:18 – is slash and asterisks and then whenever
00:01:22 – your comment is asterisks and then the
00:01:26 – same slash like that but the problem is
00:01:28 – that we type this in the wrong place
00:01:31 – so yeah copy that and put it in the
00:01:35 – style section where it's supposed to go
00:01:37 – and if everything is correct and you're
00:01:40 – using sublime text and you're using this
00:01:42 – color scheme then your comments should
00:01:46 – be light gray so under global we'll
00:01:50 – begin with body open and closed
00:01:53 – parenthesis now when we will begin with
00:01:56 – going margin 0 and padding:0 because
00:02:02 – automatically
00:02:03 – all web pages they already have a margin
00:02:08 – right on the sides like that and that
00:02:12 – looks it doesn't look very good at all
00:02:15 – so we want to remove that margin if we
00:02:18 – reload the page we should see that there
00:02:22 – is a difference it did move up and that
00:02:24 – did you more to just edge because we
00:02:27 – removed the market and what we want to
00:02:29 – do next is we will just add a font
00:02:34 – family thought family and for this font
00:02:39 – you can use whatever you want I'm going
00:02:41 – to be using a font I have installed on
00:02:44 – my computer called next uh bold this
00:02:47 – unfortunately isn't a Google font so if
00:02:49 – you want to use this font on their
00:02:51 – website you will have to include it in
00:02:52 – your website files then that might be a
00:02:54 – different tutorial but for now if you're
00:02:58 – just practicing you can use whatever
00:02:59 – font you like on your own computer
00:03:01 – without having to use google fonts or
00:03:04 – having to include it in your website
00:03:07 – files you want to change the background
00:03:19 – our webpage don't forget the semicolons
00:03:22 – after each line and our URL for the
00:03:26 – background is just the image because it
00:03:30 – is located in the same place as my
00:03:34 – website file is and we also want to add
00:03:37 – some options after this which are
00:03:39 – no-repeat which means it's not going to
00:03:42 – tile Center which means it will be in
00:03:45 – the center of the webpage and Center
00:03:50 – fixed in the background size we want to
00:03:54 – change that to cover we want to have it
00:03:57 – cover the whole webpage so save it go to
00:04:02 – our web page web browser reload it and
00:04:05 – you should already see that we have our
00:04:07 – background if we move it as you can see
00:04:11 – our image stays in the center at all
00:04:14 – times and it also doesn't pile either it
00:04:18 – is perfect right now and also you can
00:04:22 – tell that our font has been applied to
00:04:24 – these links so so far so good we want to
00:04:30 – skip a line we're going to add a new
00:04:32 – comment navbar because the next couple
00:04:36 – of lines will be for our navigation bar
00:04:39 – we want to begin with our drop-down
00:04:41 – drop-down in the way we call a class is
00:04:45 – dot and then whatever the class one's
00:04:49 – the class of our div was drop-down so
00:04:52 – dot drop-down right the C's open close
00:04:56 – it and inside there we don't need to
00:05:00 – change the font family because we
00:05:02 – already did it in the body but we will
00:05:03 – change the width we want it to be 100%
00:05:06 – of the screen at all times so it will
00:05:09 – stretch out to those edges of the web
00:05:11 – page no matter how large it is display
00:05:16 – we want to change that to inline block
00:05:18 – because we want it to be inline o'clock
00:05:21 – the background color I actually already
00:05:24 – have a color which is a semi-transparent
00:05:27 – dark blue color right here and I'm just
00:05:31 – going to go
00:05:32 – head and copy paste the colored in if
00:05:36 – you want to use this color you can it is
00:05:39 – a pretty nice color and I use RGB a red
00:05:43 – green blue outside red is – green is 50
00:05:48 – we was 96 an outlet point eight which
00:05:50 – means into house point eight
00:05:53 – transparency it is mostly solid but
00:05:55 – there is a bit of transparency and our
00:05:57 – last thing we want to do is padding 10
00:06:01 – pixels at the top 0 10 pixels at the
00:06:07 – bottom and 0 I'm not exactly sure which
00:06:12 – order these going but I know that this
00:06:14 – one in this one our top and bottom for
00:06:16 – sure this one in this one are the sides
00:06:20 – so now that we've done drop down we're
00:06:23 – going to go ahead and edit our image now
00:06:25 – and the way we're going to call our
00:06:26 – class is dot and then logo image because
00:06:30 – that is the class of our image if it's
00:06:33 – not then you want to put in your own
00:06:34 – class because obviously it won't work
00:06:36 – margin we want to put in 10 pixels
00:06:39 – because we don't want it to completely
00:06:41 – top the we don't want it to completely
00:06:44 – touch the edge of the screen I'm not
00:06:47 – really a big fan of that and the width
00:06:49 – we don't have to change the height when
00:06:51 – we change the width if you want it to
00:06:53 – only be 300 pixels wide you don't have
00:06:55 – to change the height for it to be
00:06:56 – proportional if you notice when you
00:06:58 – click Save and we reload this it is 300
00:07:03 – pixels wide is the correct size and it's
00:07:09 – proportional it's not stretched or
00:07:11 – anything so you don't need to worry
00:07:13 – about that now in this next line we will
00:07:18 – be calling the class of our drop-down
00:07:22 – button which happens to be drop down
00:07:25 – navigation button we just want to copy
00:07:27 – your class to make sure we get it
00:07:28 – correct paste it in here open
00:07:30 – parentheses close parentheses and we're
00:07:34 – just good let's put in our styles right
00:07:36 – now the color we want to be white so we
00:07:41 – can see it well padding we want no
00:07:44 – padding
00:07:48 – the font size already have a set font
00:07:52 – size which I'm going to be using 20
00:07:54 – pixels the border we want there to be no
00:08:00 – border and cursor we want it to be these
00:08:06 – pointers what we're going to do next is
00:08:08 – we're going to go to the next line and
00:08:11 – we're going to call the class of a
00:08:12 – regular button which happens to be
00:08:17 – regular navigation button again we want
00:08:20 – to copy that and paste it into here just
00:08:23 – to make sure that we have the correct
00:08:25 – class open parentheses close parentheses
00:08:28 – and now we're going to type in basically
00:08:32 – the same things that are in here
00:08:33 – actually copy that and just paste it in
00:08:37 – there and that should be all now let's
00:08:42 – just save that and look at our webpage
00:08:48 – as you can see it made them white and it
00:08:51 – made them bigger just like I wanted to
00:08:53 – the links inside the drop-down are still
00:08:57 – the same as they were before but we will
00:09:00 – be editing that soon on the next button
00:09:07 – on the next line we want to call the
00:09:10 – class of our navigation list which
00:09:12 – happens to be Nablus and the list item
00:09:16 – says the way you call objects inside
00:09:19 – objects that have a class so you don't
00:09:22 – need to add a class to every single
00:09:23 – object this way it's pretty nice we're
00:09:26 – going to type in display:inline-block
00:09:29 – which should make all the links line up
00:09:32 – in a horizontal line just like it says
00:09:35 – in my book ami margin-right specifically
00:09:40 – we want to be 30 pixels so there's a bit
00:09:43 – of space between each one of the weeks
00:09:47 – let's go to the next line and type in
00:09:51 – dot Nablus link and our hyper reference
00:10:03 – inside here we're going to type in
00:10:06 – text-decoration:none which this does is
00:10:09 – it removes the it removes the underline
00:10:16 – I believe and perhaps the dots as well
00:10:20 – and the text shadow will be two pixels
00:10:27 – to each side two pixels two pixels and
00:10:32 – two pixels so basically two pixels away
00:10:35 – from the text to the lower right hand
00:10:42 – corner just like in this one and it
00:10:45 – looks pretty nice and the color will be
00:10:52 – RGB a color which is basically the same
00:10:57 – color as the navigation bar except there
00:11:02 – is no transparency to it now what we're
00:11:06 – going to do next is we're going to add a
00:11:10 – style for just the novelist by itself
00:11:18 – text
00:11:20 – text-align is going to be Center we want
00:11:24 – the links to be in the center and you
00:11:28 – text-decoration want to be done just as
00:11:31 – we did before we want no underlines and
00:11:34 – dogs no anything like that and let's
00:11:39 – just save that and reload our page so as
00:11:43 – you can see we have our links and they
00:11:47 – do look just like these so we're good
00:11:49 – there we have our aquariums and right
00:11:54 – under it we have Monterey San Francisco
00:11:56 – Coney Island San Diego so our drop-down
00:11:59 – is right here as you can see we can see
00:12:02 – it and it's not styled the way we want
00:12:05 – it to the way we want it to be so that
00:12:08 – is what we're going to be doing in the
00:12:10 – next video I hope you guys enjoyed this
00:12:13 – video please like and subscribe if you
00:12:15 – did the project files should be
00:12:17 – available to download down below if
00:12:18 – you're having issues if you're having
00:12:21 – any problems with the code feel free to
00:12:23 – comment
00:12:24 – Gavan e suggestions feel free to say so
00:12:26 – in comment section and I'll be seeing
00:12:29 – you in the next video
00:12:33 – [Music]
00:12:40 – [Music]


Video Url:
http://youtu.be/CRzSAEniMQc

Comments

comments