The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to create a navbar in Website, How do i create navbar for the following tabs
My Website
post Jan 20 2017, 04:37 AM
Post #1





Group: Members
Posts: 1
Joined: 20-January 17
Member No.: 26,278



<!DOCTYPE html>
<html>
<head>
<title>New Website</title>

</head>
<div class="navbar">
<ul>
<li><a href="http://www.prestige-lakeridge.in/">Prestige Lake Ridge</a></li>
<li><a href="https://www.prestigekewgardens.org.in/">Prestige Kew Gardens</a></li>
<li><a href="http://www.sobha-dreamacres.co.in/">Sobha Dream Acres</a></li>
</ul>

</div>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 20 2017, 06:42 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,624
Joined: 9-August 06
Member No.: 6



How do you mean? How you would style it? Well, that depends on how you want it to look. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AngusmcFangus
post Jan 20 2017, 02:52 PM
Post #3





Group: Members
Posts: 9
Joined: 5-January 17
Member No.: 26,255



Do you want it a tab at the top? Or something that you click on and it pulls it out?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AngusmcFangus
post Jan 20 2017, 03:09 PM
Post #4





Group: Members
Posts: 9
Joined: 5-January 17
Member No.: 26,255



You could do something on the lines of this.. smile.gif

<style>

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 400px; //Change this to 0px if you want it on the left instead of the right
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px; //Changable to whatever size fits for you
color: #818181;
display: block;
transition: 0.3s
}

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

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

</style>


<html>

<button onclick="openNav()">☰ Your Side Nav</button></span>
<ul>

<div id="mySidenav" class="sidenav">

<a href="java script:void(0)" class="closebtn" onclick="closeNav()">×</a>

<li><a href="http://www.prestige-lakeridge.in/">Prestige Lake Ridge</a></li>
<li><a href="https://www.prestigekewgardens.org.in/">Prestige Kew Gardens</a></li>
<li><a href="http://www.sobha-dreamacres.co.in/">Sobha Dream Acres</a></li>
</ul>

</html>

<script>

function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}

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

</script
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 20 2017, 03:11 PM
Post #5


.
********

Group: WDG Moderators
Posts: 7,598
Joined: 10-August 06
Member No.: 7



The word "navbar" sounds like something horizontal, which can be done with some CSS.

Not sure why the thread is in the Client-side Scripting forum. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 20 2017, 03:24 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,624
Joined: 9-August 06
Member No.: 6



Or vertical. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd July 2017 - 07:46 PM