PH-
Welcome to PHCorner Forums! Sign up for free to unlock full access and exclusive privileges, including:
- Asking questions about computer and mobile issues
- Discovering internet tips for your mobile network and computer
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.
You should upgrade or use an alternative browser.
🔒 Closed Nav bar animation mobile view
- Thread starter SUNRAI
- Start date
- Status
- Not open for further replies.
PHC_Jayvee
nakatapos din sa research😂🤣
Gamit ka jquery
Lagyan mo yung fa bars ng id na btn
Sa navbar naman lagyan mo id na nav
Sa jquery mo gawa ka script na
$('#btn').click(function (){
$('#nav').show()
})
Lagyan mo yung fa bars ng id na btn
Sa navbar naman lagyan mo id na nav
Sa jquery mo gawa ka script na
$('#btn').click(function (){
$('#nav').show()
})
Impostor Syndrome
Honorary Poster
Learn it here para mas madali.
You do not have permission to view the full content of this post. Log in or register now.
You do not have permission to view the full content of this post. Log in or register now.
Impostor Syndrome
Honorary Poster
[XX='alasacelui, c: 621105, m: 714257'][/XX] How? responsive yan.
Equilibrium
Fanatic
<head>
<link rel="preconnect" href="You do not have permission to view the full content of this post. Log in or register now.">
<link href="You do not have permission to view the full content of this post. Log in or register now." rel="stylesheet">
<link rel="stylesheet" href="You do not have permission to view the full content of this post. Log in or register now.">
<title>Planets</title>
<link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="logo">PLANETS</div>
<ul class="nav-links" id="link">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
<span class="slide">
<a href="#" onClick="openSlideMenu()">
<i class="fa fa-bars fa-2x"></i>
</a>
</span>
</nav>
</body>
CSS
* {
margin: 0px;
padding:0px;
box-sizing: border-box;
}
body {
background-color: black;
overflow-x: hidden;
}
nav {
display: flex;
justify-content: space-around;
padding: 10px;
color: white;
border-bottom:1px solid #dddddd;
font-family: 'Poppins', sans- serif;
}
.logo {
font-weight: 400;
letter-spacing: 1px;
color: #8540ff;
font-size: 1.5rem;
flex: 1 1 auto;
}
.nav-links {
display: flex;
justify-content: space-around;
flex: 1 1 auto;
transition: all 1s ease;
}
.nav-links a {
text-decoration: none;
color: #dcdcdc;
font-size: 1rem;
text-transform: uppercase;
position: relative;
cursor: pointer;
caret-color: #8540ff;
}
.nav-links li {
list-style: none;
}
span{
flex:1 0 auto;
postion:relative;
text-align:right;
align-self:center;
}
.fa {
display: none;
color: #e9e9e9;
position: relative;
}
media only screen and (max-width: 760px) {
.nav-links{
display:none;
}
.toggle-link{
display:flex;
flex-direction:column;
position:absolute;
width:auto;
top: 63px;
padding: 20px;
background:white;
right:0;
}
.logo {
font-size: 1.8rem;
}
nav {
padding: 10px;
}
}
JS
function openSlideMenu(){
let link = document.getElementById("link")
console.log(link.classList.toggle("toggle-link"))
}
<link rel="preconnect" href="You do not have permission to view the full content of this post. Log in or register now.">
<link href="You do not have permission to view the full content of this post. Log in or register now." rel="stylesheet">
<link rel="stylesheet" href="You do not have permission to view the full content of this post. Log in or register now.">
<title>Planets</title>
<link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="logo">PLANETS</div>
<ul class="nav-links" id="link">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
<span class="slide">
<a href="#" onClick="openSlideMenu()">
<i class="fa fa-bars fa-2x"></i>
</a>
</span>
</nav>
</body>
CSS
* {
margin: 0px;
padding:0px;
box-sizing: border-box;
}
body {
background-color: black;
overflow-x: hidden;
}
nav {
display: flex;
justify-content: space-around;
padding: 10px;
color: white;
border-bottom:1px solid #dddddd;
font-family: 'Poppins', sans- serif;
}
.logo {
font-weight: 400;
letter-spacing: 1px;
color: #8540ff;
font-size: 1.5rem;
flex: 1 1 auto;
}
.nav-links {
display: flex;
justify-content: space-around;
flex: 1 1 auto;
transition: all 1s ease;
}
.nav-links a {
text-decoration: none;
color: #dcdcdc;
font-size: 1rem;
text-transform: uppercase;
position: relative;
cursor: pointer;
caret-color: #8540ff;
}
.nav-links li {
list-style: none;
}
span{
flex:1 0 auto;
postion:relative;
text-align:right;
align-self:center;
}
.fa {
display: none;
color: #e9e9e9;
position: relative;
}
media only screen and (max-width: 760px) {
.nav-links{
display:none;
}
.toggle-link{
display:flex;
flex-direction:column;
position:absolute;
width:auto;
top: 63px;
padding: 20px;
background:white;
right:0;
}
.logo {
font-size: 1.8rem;
}
nav {
padding: 10px;
}
}
JS
function openSlideMenu(){
let link = document.getElementById("link")
console.log(link.classList.toggle("toggle-link"))
}
Equilibrium
Fanatic
hahaha ikaw na mag validate ng function, namiss ko mag html css js, kaya na pa try
- Status
- Not open for further replies.
About this Thread
-
8Replies
-
354Views
-
5Participants
Last reply from:
Equilibrium
Equilibrium
New Topics
-
NEED HELP for BULK SMS Update
- Started by dev-ace
- Replies: 2
- 💻 Coding & Programming
-
Newbie Vibe Coder
- Started by The 7th Son
- Replies: 5
- 💻 Coding & Programming
-
Junior Software Developer - LF Work
- Started by Renreneee
- Replies: 2
- 💻 Coding & Programming
-
KITFI PisoWiFi not KITIFI
- Started by PHC-FCinco
- Replies: 9
- 💻 Coding & Programming
-
Simple POS - New UI and Features [FREE DESKTOP APP]
- Started by aewrin
- Replies: 16
- 💻 Coding & Programming
-
Custom with ROOT for LPB-2.0-1.1.7.5-OPI-ONE.img.gz
- Started by Fullz
- Replies: 16
- 💻 Coding & Programming
-
Free Python online course
- Started by dee-u
- Replies: 0
- 💻 Coding & Programming
-
ZKTeco Live20R SDK - For Web Development
- Started by ChibiCed
- Replies: 2
- 💻 Coding & Programming
-
Pahingi all in one wordpress plugin unlimited
- Started by caredebs
- Replies: 0
- 💻 Coding & Programming
Trending Topics
Online now
- Members online
- 1,063
- Guests online
- 2,105
- Total visitors
- 3,168