dwd-projects
/
rgyci.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

menu responsive dropdown

master
dev sp 2023-01-13 07:34:38 +00:00
parent de470efc4e
commit f7507ccaea
1 changed files with 115 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/MainHeader.astro
View File

@ -1,31 +1,50 @@
<div class="hidden md:block">
<div class="topnav"> <div class="navbar ">
<a href="#home" class="active">Logo</a> <a href="#home">Home</a>
<div id="mobileMenu" class="hidden">
<a href="#news">News</a> <a href="#news">News</a>
<a href="#contact">Contact</a> <div class="dropdownDesktop">
<div class="dropdown"> <button class="dropbtnDesktop">Dropdown
<button class="dropbtn">Dropdown <i class="fa fa-caret-downDesktop"></i>
<i class="fa fa-caret-down"></i>
</button> </button>
<div class="dropdown-content"> <div class="dropdown-contentDesktop">
<a href="#">Link 1</a> <a href="#">Link 1</a>
<a href="#">Link 2</a> <a href="#">Link 2</a>
<a href="#">Link 3</a> <a href="#">Link 3</a>
</div> </div>
</div> </div>
<a href="#about">About</a>
<a href="#about">About</a>
<a href="#about">About</a>
<a href="#about">About</a>
</div> </div>
<a class="icon" onclick="openMobileMenu()"> </div>
&#9776;
</a> <div class="mobileTopMenu block md:hidden">
<div class="topnavMobile">
<a href="#home" class="active">Logo</a>
<div id="mobileMenu" class="hidden">
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
&#8964
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2Link 2Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="#about">About</a>
<a href="#about">About</a>
<a href="#about">About</a>
</div>
<a class="icon" onclick="openMobileMenu()">
&#9776;
</a>
</div>
</div> </div>
<script is:inline> <script is:inline>
function openMobileMenu() { function openMobileMenu() {
var element = document.getElementById("mobileMenu"); var element = document.getElementById("mobileMenu");
@ -34,7 +53,79 @@
</script> </script>
<style> <style>
.navbar {
overflow: hidden;
background-color: #333;
/* position: absolute;
width: 100%;
left: 0;
top: 0; */
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdownDesktop {
float: left;
overflow: hidden;
}
.dropdownDesktop .dropbtnDesktop {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdownDesktop:hover .dropbtnDesktop {
background-color: red;
}
.dropdown-contentDesktop {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-contentDesktop a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-contentDesktop a:hover {
background-color: #ddd;
}
.dropdownDesktop:hover .dropdown-contentDesktop {
display: block;
}
/* .mobileTopMenu{
position: absolute;
top:0;
left:0;
width:100%;
} */
.dropdown:hover .dropdown-content { .dropdown:hover .dropdown-content {
display: block; display: block;
background-color: #ddd; background-color: #ddd;
@ -45,7 +136,6 @@
.dropdown-content { .dropdown-content {
display: none; display: none;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
} }
@ -60,14 +150,14 @@
.topnav { .topnavMobile {
overflow: hidden; overflow: hidden;
background-color: #333; background-color: #333;
position: relative; position: relative;
} }
.topnav a { .topnavMobile a, .topnavMobile >div > div {
color: white; color: white;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
@ -75,7 +165,7 @@
display: block; display: block;
} }
.topnav a.icon { .topnavMobile a.icon {
background: black; background: black;
display: block; display: block;
position: absolute; position: absolute;
@ -83,13 +173,13 @@
top: 0; top: 0;
} }
.topnav a:hover { .topnavMobile a:hover {
background-color: #ddd; background-color: #ddd;
color: black; color: black;
} }
.active { .active {
background-color: #04AA6D; background-color: #aa6204;
color: white; color: white;
} }