What is Responsive Menu?
Responsive menu is a different type of Navigation Menu that responses differently according to the screen size of the visitor's devices. When someone will visit it in a laptop or desktop, then it will act like a normal menu. But if anyone visit it using a Tab or Mobile Phone, then the menu will be re-sized and re-designed automatically.
1. A text editor like Notepad++, Sublime Text, Aptana Studio, Dreamweaver or simple Notepad.
2. Zero knowledge about HTML, CSS and JavaScript.
3. But importantly you need few minutes and patience. :)
Lets see the codes given below. It's the basic structure of a simple webpage where I have added only an unordered list into the body section. The codes will create a list only as shown in the image below. Type the codes or copy and paste them into a text editor, then save that file as menu.html Finally open that .html file with a browser software. Lets know how to save a text document as an HTML file.
<head>
<title>Responsive Menu</title>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tips & Tricks</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>
Description of the Above Codes
<html> is the opening tag to tell the browser that it's an HTML document.
<head> is to define the header section.
<title>Responsive Menu</title> is responsible to set a title for the webpage.
</head> closing tag for the opening <head> tag.
<body> All the visible part will start after the <body> tag.
<ul> to create an Unordered List.
<li> to grab the single part of the list.
</ul> to end the Unordered List.
</body> to end the body part.
</html> to close the <html> tag.
#Next Posts:
1. Responsive Menu 02: Adding CSS to Change an Unordered List into a Menu
2. Responsive Menu 03: Make the Menu Responsive adding Some More Codes
<!DOCTYPE html>
<html><head>
<title>Responsive Menu</title>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tips & Tricks</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>
The Codes you need
The result of the above codes
Description of the Above Codes
<html> is the opening tag to tell the browser that it's an HTML document.
<head> is to define the header section.
<title>Responsive Menu</title> is responsible to set a title for the webpage.
</head> closing tag for the opening <head> tag.
<body> All the visible part will start after the <body> tag.
<ul> to create an Unordered List.
<li> to grab the single part of the list.
</ul> to end the Unordered List.
</body> to end the body part.
</html> to close the <html> tag.
#Next Posts:
1. Responsive Menu 02: Adding CSS to Change an Unordered List into a Menu
2. Responsive Menu 03: Make the Menu Responsive adding Some More Codes
No comments:
Post a Comment