Home How to add an expandable sidebar toggle navigation menu link

How to add an expandable sidebar toggle navigation menu link

183 views
1
0 Comments

Hello John, Am building a website and my client wish to have an expandable sidebar toggle navigation link, for his menu items, how do i achieve this without messing up my stylesheets? thanks!

Comments

comments

1

Hello Abiola, its easy to add one to your client’s website. you can do that with the following codes.

 


<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-left" style="display:none" id="mySidebar">
<button class="w3-bar-item w3-button w3-large"
onclick="w3_close()">Close &times;</button>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div id="main">

<div class="w3-teal">
<button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="w3_open()">&#9776;</button>
<div class="w3-container">
<h1>My Page</h1>
</div>
</div>

<img src="img_car.jpg" alt="Car" style="width:100%">

<div class="w3-container">
<p>In this example, the sidebar is hidden (style="display:none")</p>
<p>It is shown when you click on the menu icon in the top left corner.</p>
<p>When it is opened, it shifts the page content to the right.</p>
<p>We use JavaScript to add a 25% left margin to the div element with id="main" when this happens. The value "25%" matches the width of the sidebar.</p>
</div>

</div>

<script>
function w3_open() {
document.getElementById("main").style.marginLeft = "25%";
document.getElementById("mySidebar").style.width = "25%";
document.getElementById("mySidebar").style.display = "block";
document.getElementById("openNav").style.display = 'none';
}
function w3_close() {
document.getElementById("main").style.marginLeft = "0%";
document.getElementById("mySidebar").style.display = "none";
document.getElementById("openNav").style.display = "inline-block";
}
</script>

</body>
</html>

Comments

comments

Comments

comments

Do you need the help of an IT Professional?
View My portfolio!!!

John is ready to assist you in your next project if you need the help of a freelancer.
If you need a long time boost in the productivity of your organization, I am also available for full time Employment.

Excerpts of my skill range covers!!!

  • Website security
  • Server Management
  • Database Managment
  • Website Development
  • Software Development
  • Entrepreneurship
  • Social media marketing
  • E-commerce
  • SEO (Search Engine Optimization)
  • Business Development
  • Project Management
  • Digital Marketing
  • Product Marketing
Contact John

Use the form below to contact me; I typically respond same day.

If you Need a Quicker Assistance you can call me instead!!!
+234 07038583101

Thank You!!!
I will Get Back To You as Soon As Possible!!!
Do you need the help of an IT Professional?
View My portfolio!!!

John is ready to assist you in your next project if you need the help of a freelancer.
If you need a long time boost in the productivity of your organization, I am also available for full time Employment.

Excerpts of my skill range covers!!!

  • Website security
  • Server Management
  • Database Managment
  • Website Development
  • Software Development
  • Entrepreneurship
  • Social media marketing
  • E-commerce
  • SEO (Search Engine Optimization)
  • Business Development
  • Project Management
  • Digital Marketing
  • Product Marketing
Contact John

Use the form below to contact me; I typically respond same day.

If you Need a Quicker Assistance you can call me instead!!!
+234 07038583101

Thank You!!!
I will Get Back To You as Soon As Possible!!!