Skip to main content

How to Design a Responsive Menu in HTML and CSS only(No JavaScript)?


How to design a responsive menu only in HTML and CSS (No JavaScript)?

In the previous tutorial we have completed the firststep(HTML) part of the responsive menu.

In this second step we you will focus on the design and responsiveness of the menu.

So, once again go to your favorite editor( Notepad or another one of your choice) and create a new file, name it style.css or whatever name you prefer.

Make sure the file to be ended with .css extension otherwise it won’t work.

Also, remember to save this file in the same directory where your index.html file was saved, if you save it in another directory, you should update the path of the style.css file in the index.html file.

Now, let’s div into the CSS code that beautify, arrange and make the menu responsive.

Here is the code copy it and paste it the style.css file and save the file once again:

<pre>

<code>

 

body{

                margin: 0px;

                padding: 0px;

}

nav{

                position: fixed;

                margin-top: 0px;

                padding-top: 0px;

                width: 100%;

                height: 75px;

                background: rgba(6,70,70,1.0);

                box-shadow: 0px 4px 18px 0px rgba(6,70,70,1.0);

}

nav ul{

                list-style-type: none;

                float: right;

                padding: 0px;

                margin: 0px;

                box-sizing: border-box;

}

ul li{

                float: left;

                margin-top: 8px;

                margin-right: 8px;

                -webkit-transition:background-color 1s ease 0.2s

}

ul li a{

                display: inline-block;      

                text-decoration: none;

                color:lightblue; 

                font-size: 2vw;

                padding: 14px 16px;

}

nav ul li a:hover{

                color: white;

}

ul li a.active:link{

                color:black;

}

#check{

                display: none;

}

.checkbutton{

                float: right;

                font-size: 2vw;

                color: #fff;

                cursor: pointer;

                display: none;

}

 

nav .logo{           

                float: left;

                margin-top:10px;

                margin-left: 2vw;

                box-sizing: border-box;

}

 

nav .logo p{       

                float: left;

                margin-top:10px;

                font-size: 2.4vw;

                color: #fff;

                letter-spacing: 1.5px;

                text-transform: uppercase;

                font-weight: bold;

                box-sizing: border-box;

                text-shadow:5px 2px black;       

}

div.header-menu{

                position: fixed;

 }

</code>

</pre>

Waww! Nice job you have created a nice responsive menu.

Alittle job at the end is to open index.html file in browser and look how it the menu that you have just created looks like.You have any question, please comment bellow or contact us on the contact page.

Comments

Post a Comment

Popular posts from this blog

10 Principles of Great Web Design

  A website is always the first point of contact when customers are on the hunt for information. Nowadays, people determine the credibility of a company based on its stunning web design. There are many factors that should be considered while designing a website, such as design, usability, and functionality. Because these factors will help convert first-time visitors into potential customers. So a good website design with a better user experience will help secure a good rank in SERP(search engine results page). 1. A KISS Always Works: A website with minimal design elements helps visitors to understand the company’s business—its products and services. Adding too many design elements to a website will give a cluttered look, and if it takes too much time to load, consumers may leave or stop visiting the site. KISS(Keep it Simple, Stupid), a principle that bloomed during 1960 in the U.S. Navy, implies that any idea or design that is simple works better than complicated ones. So a design...
Post a Comment
Read more

What Will Make Your Website Design to Increase Sales Effectiveness?

Given the world going digital today, websites are the first impressions of any business today. And it is not just the physical appearance of the website to attract customers that matters, but the site’s user experience, functionalities and the ability to sell that really matters ultimately. Looking beyond the aesthetics and understanding the selling standpoint view of a website design is very important. So what are the essential elements that you must know to make sure your website is working effectively working to increase your sales? Let us take a look. The need of a customized design: Website design has become way with the number of ready-made design templates surfacing online. All one has to do is purchase a template and get it done. Yes, it saves a lot of time, but then, in the long run, the options that you’d need for having your brand stand out is not available in the template sites. It would look static and appear stale over a period of time. Trends keep changing an...
Post a Comment
Read more

Why You Need to Know the Long Island Web Design Companies?

Web Design Many people don't consider design. Millions of internet surfers out there, web design is their very first impression of your enterprise and your credibility. It is the key question is how to add value to the user's experience, as they feel that they really have someone to visit your site. Though a design could possibly be considered advanced, it might not be accepted. Second, the internet design comes together with marketing your website to the net. For all of us, the design is visual, but in addition, it is strategic. Furthermore, the design needs to be in a position to pull their target customers. Although it could possibly be considered advanced, it might not be accepted. Customized web page design in order to effectively promote your company on the web, you must make an online page and load it with useful contents that will entice a number of visitors to check at your page. Development businesses require a team effort in order to create an exceptional brand for ...
Post a Comment
Read more