All geek questions in one place

Is it possible for the contents in the navigation bar to act as buttons, not links

I try to keep my buttons concise in the menu navigation bar, but I noticed that most of the content on the navigation bar acts as links, I want to store the table in my buttons inside the navigation bar. I do not know if this is possible or reasonable. I am really new to this ............................................. .................

<!DOCTYPE html> <html> <head> <style> body { font-family: 'Lato', sans-serif; } .overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } } </style> </head> <body> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; </a> <div class="overlay-content"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> </div> <h2>Fullscreen Overlay Nav Example</h2> <p>Click on the element below to open the fullscreen overlay navigation menu.</p> <p>In this example, the navigation menu will slide in, from left to right: </p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> <script> function openNav() { document.getElementById("myNav").style.width = "50%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; } </script> </body> </html>
+5
source share
4 answers

This should give you what you need. Change menu links to

 <div class="overlay-content"> <button class="buttonStyle" href="#">About</button> <button class="buttonStyle" href="#">Services</button> <button class="buttonStyle" href="#">Clients</button> <button class="buttonStyle" href="#">Contact</button> </div>

Then add the following to your style.

 .buttonStyle { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; background-color: transparent; border: 0; outline: 0; position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .buttonStyle:hover { color: #f1f1f1; }

All we've done here has changed the <a> tags to <button> tags and styled your button to look just like your text links. Hope this helps.

Edit: You will need to edit the media request to add responsiveness again :)

 <style> body { font-family: 'Lato', sans-serif; } .overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } .buttonStyle { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; background-color: transparent; border: 0; outline: 0; position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .buttonStyle:hover { color: #f1f1f1; } @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } } </style> <body> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; </a> <div class="overlay-content"> <a href="#">About</a> <button class="buttonStyle" href="#">Services</button> <button class="buttonStyle" href="#">Clients</button> <button class="buttonStyle" href="#">Contact</button> </div> </div> <h2>Fullscreen Overlay Nav Example</h2> <p>Click on the element below to open the fullscreen overlay navigation menu.</p> <p>In this example, the navigation menu will slide in, from left to right: </p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> <script> function openNav() { document.getElementById("myNav").style.width = "50%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; } </script> </body>
0
source

Look, here I have a working fragment, you can change the color and indentation / margins for the button class to suit you.

 function openNav() { document.getElementById("myNav").style.width = "50%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; } 
 .button { display: block; width: 115px; height: 25px; padding: 10px; text-align: center; border-radius: 5px; color: white; font-weight: bold; margin-left : 100px; margin-bottom:5px; } body { font-family: 'Lato', sans-serif; } .overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } } 
 <!DOCTYPE html> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; </a> <div class="overlay-content"> <a href="#" class="button">About</a> <a href="#" class="button">Services</a> <a href="#" class="button">Clients</a> <a href="#" class="button">Contact</a> </div> </div> <h2>Fullscreen Overlay Nav Example</h2> <p>Click on the element below to open the fullscreen overlay navigation menu.</p> <p>In this example, the navigation menu will slide in, from left to right: </p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
0
source

Add the .btn class to your link and add some styles. With: the active selector, you can add a click effect, for example, a standard button - for example: insert shadow.

 .overlay a.btn { background: #818181; color: #fff; display: inline-block; font-weight: 600; font-size: 36px; line-height: 36px; text-align: center; vertical-align: middle; cursor: pointer; border-radius: 6px; padding: 17px; text-transform: uppercase; text-decoration: none; white-space: normal; } .overlay a.btn:active { box-shadow: inset 0px 0px 8px rgba(0,0,0,.7); } <a href="#" class="btn">About</a>
0
source

You can do this if you do not want your links for some reason:

 <!DOCTYPE> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> </head> <body> <a href="http://www.google.com" onclick="hRefClick(event);">alikn</a> </body> </html> <script> function hRefClick(event){ event.preventDefault(); alert("redirection prevented"); } </script>
0
source

Source: https://habr.com/ru/post/1274265/

More articles:


All Articles