Skip to main content

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


Menu or menu bar is a horizontal or vertical well-aligned sequence of a website or blog pages.
The main and fundamental function of menu in a website is EASY NAVIGATION.
A responsive, beautiful and nice looking menu for a website or blog is very necessary, especially for a blogger is really important because a menu gives your blogger easy navigation through your blogger’s pages.
If you decide to monetize your blogger through Google AdSense, beside others setups easy navigation through pages in a blogger is the need for Google AdSense approval. Another point to keep in mind is the responsiveness.
Responsive layout for different screens of devices is the must now-a-days.
There are plenty of frameworks that can be used to get the job done, but if you make a responsive layout without any framework, you will have full control on your layout, every time you can make changes to that according to your choice.
In a couple of tutorials, we are going to make a responsive menu, sidebar, and a footer for a website.
Finally, you will be able to HACK NASA.
Mmmmm I’m joking just for your smile.
Let’s start to create a responsive menu only in HTML and CSS in just two easy steps:

First step: working with HTML
Second step: working with CSS.
Temporary unavailable

First step: 
open an editor of your choice like Notepad or Notepad++ then create a new file name it index or whatever you want and save it as index.html, make sure that your file extension is html otherwise it won’t be rendered by browser.
After naming the file copy and paste the bellow code in the file that you have just created, and that’s it.
    <prev>
        <code>
                <!DOCTYPE html>

<html>

<head>

                <meta charset="utf-8">

                <meta name="viewport" content="width=device-width, initial-scale=1">

                <title>Rannaweb</title>

<!—if you are not connected to the internet, you will not see the bars icon in the mobile version of the menu -->

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

                <link rel="stylesheet" type="text/css" href="assets\style.css">

</head>

<body>

                <div class="header-menu">

                                <nav>

                                <input type="checkbox" id="check"></input>

                                <label for="check" class="checkbutton">

<i class="fa fa-bars"></i>

</label>

                                <div class="logo"><p>Your Website </p></div>

                                <ul>

                                                <li><a href="#” class="active">Home</a></li>

                                                <li><a href="#">Services</a></li>

                                                <li><a href="#">Privacy</a></li>

                                                <li><a href="#">Terms & Condition</a></li>

                                                <li><a href="#">About</a></li>

                                </ul>

                                </nav>

                </div>

        </code>
        </pre>
Well done! You have completedthe first step. Now let’s go to the second step(CSS)

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