• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How do I use javascript to click and show these links on mobile devices? I have tried but failed because I don't know how to use it.

mic

New Coder
!-- Float links to the right -->
<div class="w3-right">
<a href="#about" class="w3-bar-item w3-button w3-hover-sand w3-padding w3-hide-small">About</a>
<div class="w3-dropdown-click w3-hide-small">
<button class="w3-button w3-hover-sand w3-padding" onclick="myFunction(document)"><a href="#tours" style="text-decoration: none">Projects</a></button>
<div id="document" class="w3-dropdown-content w3-bar-block w3-hover-sand">
<a href="#private-vip-tours" class="w3-bar-item w3-button w3-hide-small">BIG PROJECTS</a>
<a href="#local-day-tours" class="w3-bar-item w3-button w3-hide-small">SMALL PROJECTS</a>
<a href="#schedule" class="w3-bar-item w3-button w3-hide-small">SCHEDULE</a>
</div>
</div>
<a href="#media" class="w3-bar-item w3-button w3-hover-sand w3-padding w3-hide-small">Price</a>
<a href="#contact" class="w3-bar-item w3-button w3-hover-sand w3-padding w3-hide-small">Contact</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="myFunction()">&#9776;</a>
</div>
</div>
</div>
<!-- On Small Screens -->
<div id="test" class="w3-bar-block w3-black w3-hide w3-hidelarge w3-hide-medium">
<a href="#about" class="w3-bar-item w3-button w3-hover-sand w3-padding">About</a>
<div class="w3-dropdown-click">
<button class="w3-button w3-hover-sand w3-padding" onclick="myFunction(document)"><a href="#tours" style="text-decoration: none">Projects</a></button>
<div id="document" class="w3-dropdown-content w3-hover-sand">
<a href="#private-vip-tours" class="w3-bar-item w3-button">BIG PROJECTS</a>
<a href="#local-day-tours" class="w3-bar-item w3-button">SMALL PROJECTS</a>
<a href="#schedule" class="w3-bar-item w3-button">SCHEDULE</a>
</div>
</div>
<a href="#media" class="w3-bar-item w3-button w3-hover-sand w3-padding">Price</a>
<a href="#contact" class="w3-bar-item w3-button w3-hover-sand w3-padding">Contact</a>
</div>

<script>
function myFunction() {
var x = document.getElementById("test");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>

<script>
function myFunction() {
var x = document.getElementById("document");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
 
Top