css slide menu Archives - https://mitindia.in/tag/css-slide-menu/ Mon, 23 Jan 2017 11:14:17 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://mitindia.in/wp-content/uploads/2023/03/cropped-android-chrome-512x512-1-32x32.png css slide menu Archives - https://mitindia.in/tag/css-slide-menu/ 32 32 Sliding menu in html css https://mitindia.in/sliding-menu-html-css/ Mon, 23 Jan 2017 10:41:58 +0000 http://www.mitindia.in/?p=735 Slider menu in html page using css To create a slider navigation menu in html by using CSS syntax. Copy the following program and paste in Notepad then save as .html file extension and view in browser. <html> <style> body { font-family: "Tahoma", sans-serif; } .sidemenu { height: 100%; width: 0; position: fixed; top: 0; […]

The post Sliding menu in html css appeared first on .

]]> Slider menu in html page using css

To create a slider navigation menu in html by using CSS syntax.

Copy the following program and paste in Notepad then save as .html file extension and view in browser.

<html>
<style>
body 
{
 font-family: "Tahoma", sans-serif;
}

.sidemenu {
 height: 100%;
 width: 0;
 position: fixed;
 top: 0;
 right: 0;
 background-color: #222;
 overflow-x: hidden;
 transition: 1s;
 padding-top: 50px;
}

.sidemenu a {
 padding: 9px 9px 9px 42px;
 text-decoration: none;
 font-size: 25px;
 color: #818181;
 display: block;
 transition: 0.3s
}

.sidemenu a:hover, .offcanvas a:focus{
 color: #f1f1f1;
}

.sidemenu .closebtn {
 position: absolute;
 top: 0;
 right: 25px;
 font-size: 36px;
 margin-left: 50px;
}
</style>
<body>

<div id="mySidenav" class="sidemenu">
 <a href="javascript:void(0)" class="closebtn" 
onclick="closeNav()">&times;</a>
 <a href="#">Web design</a>
 <a href="#">Digital Marketing</a>
 <a href="#">Mobile App</a>
 <a href="#">Contact</a>
<img src="d:\web-design.jpg" height=100 width=100>
<img src="d:\bing.jpg" height=100 width=100>
<img src="d:\ubuntu.png" height=100 width=100>
<img src="d:\java-logo.jpg" height=100 width=100>
</div>
<div align=right>
<h2 align=right>Animated SideMenu Demo</h2>
<span style="font-size:30px;cursor:pointer" 
onclick="openNav()">&#9776; Menu</span>
<script>
function openNav() {
 document.getElementById("mySidenav").style.width = 
"300px";
}

function closeNav() {
 document.getElementById("mySidenav").style.width = 
"0";
}

</script>
</body>
</html>

Output 

Before opening Menu

After opening Menu

Navigation bar with header logo

Share

The post Sliding menu in html css appeared first on .

]]>