html left menu

Solutions on MaxInterview for html left menu by the best coders in the world

showing results for - "html left menu"
27 Aug 2018
1<! HTML, later CSS, then Javascript>
2
3<!DOCTYPE html>
4<html>
5<head>
6  <script src="YourScript.js"></script>
7  <link href="YourCSSDocument.css" rel="stylesheet" type="text/css" media="screen" />
8  <style>
9  	body {font-family: "Lato", sans-serif;}
10		.sidenav {height: 100%;width: 200px;position: fixed;z-index: 1;top: 0;left: 0;background-color: #464850;overflow-x: hidden;padding-top: 20px;}
11		.sidenav a {padding: 6px 8px 6px 16px;text-decoration: none;font-size: 25px;color: #818181;display: block;}
12		.sidenav a:hover {color: #f1f1f1;}
13		.main {margin-left: 200px; /* Same as the width of the sidenav */font-size: 20px; /* Increased text to enable scrolling */padding: 0px 10px;}
14		@media screen and (max-height: 450px) {
15  		.sidenav {padding-top: 15px;}
16        .sidenav a {font-size: 18px;}}
17  </style>
18</head>
19  
20<body>
21	<div class="sidenav">
22      <button onclick="Link1()" class="buttonActivMenu"><h3>Link 1</h3></a></button>
23  	  <button onclick="Link2()" class="buttonMenuWithUndercategory"><h3>link2</h3></a></button>
24	  <button onclick="Link2.1()" class="buttonSecondMenu">link2.1</a></button>
25	  <button onclick="Link2.2()" class="buttonLastSecondMenu">link2.2</a></button>
26	</div>
27
28	<div class="main">
29      Your text and images here
30</div>
31</body>
32</html>
33
34<! Now the CSS part:>
35
36.buttonMenu {
37  background-color: #464850;
38  border: none;
39  border-bottom: 1px solid lightgrey;
40  color: lightgrey;
41  text-align: left;
42  text-decoration: none;
43  display: inline-block;
44  font-size: 16px;
45  transition-duration: 0.2s;
46  font-family:Arial;
47  width: 200px;
48  height: 50px;
49}
50.buttonMenu:hover {
51  background-color: grey;
52  color: black;
53}
54.buttonMenuWithUndercategory {
55  background-color: #464850;
56  border: none;
57  border-bottom: 1px dashed lightgrey;
58  color: lightgrey;
59  text-align: left;
60  text-decoration: none;
61  display: inline-block;
62  font-size: 16px;
63  transition-duration: 0.2s;
64  font-family:Arial;
65  width: 200px;
66  height: 50px;
67}
68.buttonMenuWithUndercategory:hover {
69  background-color: grey;
70  color: black;
71}
72.buttonSecondMenu {
73  background-color: #464850;
74  border: none;
75  border-bottom: 1px dashed lightgrey;
76  color: lightgrey;
77  text-align: right;
78  text-decoration: none;
79  display: inline-block;
80  font-size: 16px;
81  transition-duration: 0.2s;
82  font-family:Arial;
83  width: 200px;
84  height: 30px;
85}
86.buttonSecondMenu:hover {
87  background-color: grey;
88  color: black;
89}
90.buttonLastSecondMenu {
91  background-color: #464850;
92  border: none;
93  border-bottom: 2px solid lightgrey;
94  color: lightgrey;
95  text-align: right;
96  text-decoration: none;
97  display: inline-block;
98  font-size: 16px;
99  transition-duration: 0.2s;
100  font-family:Arial;
101  width: 200px;
102  height: 30px;
103}
104.buttonLastSecondMenu:hover {
105  background-color: grey;
106  color: black;
107}
108.buttonActivMenu {
109  background-color: #797c88;
110  border: none;
111  border-bottom: 1px solid lightgrey;
112  color: lightgrey;
113  text-align: left;
114  text-decoration: none;
115  display: inline-block;
116  font-size: 16px;
117  transition-duration: 0.2s;
118  font-family:Arial;
119  width: 200px;
120  height: 50px;
121}
122
123<! Now javascript:>
124  
125
126function Link1(){
127	window.location.href = "Link1";
128}
129function Link2(){
130	window.location.href = "Link2";
131}
132function Link2.1(){
133	window.location.href = "Link2.1";
134}
135function Link2.2(){
136	window.location.href = "Link2.2";
137}
similar questions
creating navigation menu using html and css how to create vertical menu in html how to make a sidebar in html html context menu how to create a menu in html w3 css navigation menu and submenu in html examples
queries leading to this page