Create CSS3 Responsive Navigation Menu in dreamweaver

Error: You must enable a payment gateway to use Easy Digital Downloads

Error: No checkout page has been configured. Visit Settings to set one.

Error: No checkout page has been configured. Visit Settings to set one.

Today i am  going to teach you to,

Create CSS3 Responsive Navigation Menu in Dreamweaver

Its very simple,

CSS3 Responsive Navigation Menu - PepFry

 

In this tutorial I’ll build a Navigation Menu section with all the usual HTML elements & CSS what you are aware of. Then from there, I’ll go on to convert the same Navigation Menu to respond when the browser window is re sized.

For this tutorial I’ll make the Responsive Navigation Menu compatible for various iPhone Orientations:

  •  Portrait orientation – Width: 320px / Height: variable height
  •  Landscape orientation – Width: 480px / Height: variable height

So that’s what this tutorial teaches you. we’ll move on with it. Hoping that you do have a copy of HTML editor setup in your system. I start the Tutorial. Step1: Open you’re copy of HTML editor, create a new .html file & save it in a drive which is accessible by browser & easy for you to locate them in future. Step2: After you have saved your .html file, you come back to HTML editor & create a normal navigation menu using simple unordered list. Now that you got the point, we’ll go on to create a Division with an id=Nav and a Parent Wrapper to it. So here is the markup for that, I’ll start right after the body tag starts, so that you will not be left with confusion as to where you need to start coding. Here we go,

We use that as the wrapper & parent wrapper for the navigation to reside within. We’ll talk about the styles needed to be applied on the elements later on in this tutorial. Now within the wrapper we’ll create the navigation menu with the use of unordered lists. Here we go, I’ll start with wrapper to avoid confusion.

So here is the actual navigation system with a single Navigation element within. Once done with that, copy the entire list element from <li> to </li> including the anchor tag as well & paste it below. So paste it according to your wish, i’d rather recommend you to replicate 3-4 list items. So it will look as follows.

Great job guys!! So there we end up with marking up the navigation system. You can launch the HTML page on your favorite browser, you can do it on clicking on the launches icon just below the menu bar towards the center. Now that the HTML file has been loaded in your browser – you can see the list items listed one below the other. If everything went good, then you will see the Navigation Menu as exactly shown in the below screenshot.

css3 responsive navigation tutorial PepFry

Great, everything looks just fine. We’ll now move forward with applying CSS 3media query & some styles to make the navigation menu looks beautiful. For this tutorial, we’ll  just put all the needed Styling within the HTML just below the <title> tag & just above </Head> tag.We call this CSS as ‘Internal or Embedded CSS‘. Here we go, we’ll start with applying CSS to the Outer Wrapper <Div> tag, then the Unordered List <ul>, then to the List itself <li> & then finally to the Anchor tag <a>. Here is the CSS, as you know we can invoke or call the HTML Elements to be Styled in 2 types i.e. using either ID or a Class. Here in this tutorial – I’ll use only use ID since we have to Style only a small section of Markup. First of, we’ll start up with the ID=Nav and the Parent Wrapper to it., Just to let you know – ID is denoted by ‘#’ Symbol.

That ends the Styles for the Outer Wrapper & the Nav section. What I have made the Nav section to be is that – It should be of 910px width and with Auto height.I made the 910px section to come to the Center of the Screen that made the navigation Menu look Beautiful.

Let me explain you what happened just now

  • Width was set to 910px
  • Height was set to Auto, so as & when Elements inside extends – height also extends automatically
  • Margin was set to 0 & Auto This means to consider Top & Bottom margin as 0 Left & Right = Auto margin. – This tells the Browser to get the 910px section towards the Center of the Screen by auto adjusting the either side of the Margin according to the Width of the View-Port.

Hope that you have understood what happened until now. I’ll move on with applying CSS to the List items & the Anchor tag. So we’ll call the #Nav and then the <ul> and then <li> and<a> to follow. Here it is:-

The above is telling the browser that of there exists a id named Nav and if an ul exists within Nav then apply the custom margin & Padding to be 0px, so that we can style them according to our wish.

The next step is to style the List item inside. Here we go

The above Style says the Browser to consider Padding & Margin of the <li> element respectively & make those list items to float left wards so that its preceding list item can also fall towards left of the current list item. Then the Style of the list item is set to none – so that the default bullet is not displayed.

Here is what we get as of now

css3 responsive navigation tutorial PepFry

Now that we got all the list item to sit along the straight line, we need to apply a contrasting color for the Anchor text, as of now its taken the default blue coloring & default underlining. Here we go,

Here is the Navigation:

css3 responsive navigation tutorial PepFry

Done with the font styling, now we’ll give each Anchor some hover effect. Here we go,

So, now you can have a look at our brand new Navigation Section Styled beautifully. Hover on the links you can see the on hover effect as well. Here we go,

css3 responsive navigation tutorial PepFry

For the last time I’ll put up Markup & CSS required fully,

Markup

 Styles Required

Wow!! we have done with the navigation Menu which is as of now Non-Responsive. Our main objective is to convert this Navigation  Menu so that it responds to various screen resolutions. The main thing what we do here is very simple, we’ll have to just override all the Styles as needed for the Responsive version.

Well guys, we’ll go on to convert this beautiful Navigation Menu to be Responsive while Browser is re-sized.

Here is the styles required,

So, there it is now the navigation will be Responsive as we wished it to!! Wow great, where do I put my Styles!! is your question right? Then, I’ll show you. See below.

Here is the final output for what we were looking for until now.

css3 responsive navigation tutorial PepFry

 

Great enjoy! If anybody still stuck up somewhere with CSS3 Responsive Navigation Menu – just put you question as comment in the form below this post. So, what do you guys say??? Isn’t it really a wonderful tutorial? Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">