How to create side navigation menu

-

 How to create side navigation menu


Side navigation menu is menu which placed either on the 
left side of the or on the right side on the page.
so today we are going to create it .

How to build

  • First create a div and inside div create ul .
  • Now add <li> you want and inside <li> add <a> tag.
  • Add style and you will get this.
How to create side navigation menu

Here is the code

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body
{
padding :0;
margin :0;
font-family: Arial, Helvetica, sans-serif;
}
.side-nav
{
position :fixed ;
display :block;
width :300px;
height :100%;
box-shadow:0 0 8px 8px rgba(0,0,0,0.2);
overflow-x:hidden ;

}
.side-nav ul{
display :block ;
padding :0;

}
.side-nav ul li
{
list-style-type :none ;
margin-left :10px;

}
.side-nav ul li img{
position :relative ;
bottom:-5px;
width :20px;
height :20px;
padding-right :5px;

}
.side-nav ul li a{
display :block;
text-decoration :none;
width :100%;
height :40px;
line-height :40px;
background :#fff;
border-bottom :1px solid #ddd ;
color:#222;

font-weight :bolder;
}

.side-nav ul li a:hover{

    background-color: beige;
}


</style>
</head>

<body>

<div class="side-nav">

<ul>
<li><a href="#" ><img src="https://static.thenounproject.com/png/108859-200.png">Posts</a></li>
<li><a href="#" ><img src="https://cdn0.iconfinder.com/data/icons/rounded-basics/24/rounded__menu-512.png">Pages</a></li>
<li><a href="#" ><img src="https://tse1.mm.bing.net/th?id=OIP.keyf0olDMGJi5Mo2YimGcwHaHa&pid=Api&P=0&w=300&h=300">Stats</a></li>
<li><a href="#" ><img src="https://tse4.mm.bing.net/th?id=OIP.rmw0t5FBAokjoO9k26TCmAHaHa&pid=Api&P=0&w=300&h=300">Setting </a></li>
<li><a href="#" ><img src="https://tse2.mm.bing.net/th?id=OIP.BKw-WDfDVAeZ6_ZtvnL6SgHaHa&pid=Api&P=0&w=300&h=300">About Us </a></li>
</ul>


</div>

<script type="text/javascript">




</script>

</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Getting Started with JavaScript

-
Getting Started with JavaScript Before you begin your journey with JavaScript, it's important to understand the fundamentals and set up your development environment. Let's explore these crucial steps in more detail: Understanding the Basics of JavaScript: JavaScript is a powerful scripting language used primarily for web development. It allows you to add interactivity and dynamic behavior to web pages. JavaScript can manipulate HTML elements, handle events like clicks and mouse movements, and interact with web APIs to fetch and send data. To better understand JavaScript, let's look at a simple example: // JavaScript code to display a message console.log("Hello, JavaScript!"); In this example, we use the console.log() function to display the message "Hello, JavaScript!" in the browser's console. This is a basic example of how JavaScript can be used to perform actions. Setting Up Your Development Environment:
Read more

JavaScript fundamentals

-
JavaScript Fundamentals JavaScript fundamentals lay the groundwork for understanding the language's core concepts, including variables and data types, operators and expressions, and control flow structures. Variables and Data Types: In JavaScript, variables are containers for storing data values. Variables can hold various types of data, including numbers, strings, booleans, arrays, objects, and more. Here's an example of declaring and initializing variables: // Variable declaration and initialization let name = "John"; let age = 30; let isStudent = true; let fruits = ["apple", "banana", "orange"]; let person = { firstName: "John", lastName: "Doe" }; Operators and Expressions: Operators in JavaScript allow you to perform operations on variables and values. JavaScript supports various types of operators, including arithmetic, assignment, comparison, logical, and bitwise operators. Expressions are com
Read more

How to create a list group with css

-
Image
How to create a list group with css and html We will create a responsive and very simple list group with css and html. We will design a beautiful header with  hoverable lists. Here is the list group Here is the source code <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > .group-list { width : 100% ; height  :auto; padding  : 0 ; margin  : 0 ; border-top : 1px  solid #ddd ; border-left : 1px  solid #ddd ; border-right  : 1px  solid #ddd; border-radius  : 2px ; box-shadow : 0   0   2px   2px  rgba( 0 , 0 , 0 , 0.1 ); } .group-list:first-child   a { border-top-left-radius : 2px ; border-top-right-radius : 2px ; } .group-list:last-child   a { border-bottom-left-radius : 2px ; border-bottom-right-radius : 2px ; } .group-list   .header { background  :#d32f2f ; color :#fff; } .group-list   .header:hover { background  :#d32f2f ; } .group-list   li { list-style-type  :none; display  :block ; width : 100% ; heig
Read more