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
-
344Views
-
5Participants
Last reply from:
Equilibrium
Equilibrium
New Topics
-
Thoughts on Claude Code mga Sir???
- Started by spydroid29
- Replies: 0
- 💻 Coding & Programming
-
Survey: Best backend for ESP32 IoT projects
- Started by itsmaxxcz
- Replies: 3
- 💻 Coding & Programming
-
Next.js hosting DMCA ignored?
- Started by nascosto
- Replies: 3
- 💻 Coding & Programming
-
LF may business/offer services/etc. Gawan kita website for Free
- Started by Naruhudo
- Replies: 0
- 💻 Coding & Programming
-
Pano po ma-cloak or change ang domain name ng fb shared post
- Started by awing
- Replies: 1
- 💻 Coding & Programming
-
WAP MASTER POS PARA SA LAHAT NG STORE
- Started by jotham124
- Replies: 1
- 💻 Coding & Programming
-
Paano gumawa ng Imei Pattern(Spotify)
- Started by FeliZhyo
- Replies: 54
- 💻 Coding & Programming
Trending Topics
-
-
Sofia + Luhn algorithm for Spotify Trial Python Code Version Valid IMEI 2026
- PHC-PROXYPIRATE
Replies: 51 -
-
-
-
-
-
-
-
Online now
- Members online
- 1,092
- Guests online
- 977
- Total visitors
- 2,069