admin管理员组文章数量:1122846
I am creating an animated html, css and jacavaript nav toggler for a therapy website which I have finally got working on all devices-but I am having trouble making it smaller without affecting the alignment of the cross after activating the toggler. This is my code:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap CSS-5.3.3 -->
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!--Font Awesome-->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css">
<!-- Latest jQuery library for plugins that require it-->
<script src=".7.1/jquery.min.js"></script>
<style type="text/css">
/*=========================Header========================*/
/*Navbar*/
.navbar{
position: absolute;
width: 100%;
top: 0;
}
/*hero banner*/
.hero-image{
/* Set a specific height */
height: 267px;
background-color:green;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*Hamburger toggler*/
button {
cursor: pointer;
background: none;
border: none;
outline: none;
appearance: none;
}
.btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btns_item {
margin: 0 20px;
text-align: center;
}
/* ------------------------------------------------------------ * #02 * ------------------------------------------------------------ */
.btnMenu02 {
width: 100px;
height: 100px;
background-color: #000;
}
.btnMenu02 > span {
display: block;
transition: all 0.4s ease-in-out;
}
.btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
display: block;
width: 70%;
height: 8px;
margin: 12px auto;
content: '';
background-color: #fff;
border-radius: 4px;
transition: all 0.2s ease-in-out;
}
.btnMenu02.is-open > span {
transform: rotate(180deg);
}
.btnMenu02.is-open > span > span {
opacity: 0;
}
.btnMenu02.is-open > span::before {
transform: translateY(20px) rotate(-45deg);
}
.btnMenu02.is-open > span::after {
transform: translateY(-20px) rotate(45deg);
}
/*//Hamburger toggler*/
</style>
</head>
<body>
<header>
<div class="hero-image">
<img class="hero-image" src="assets/images/banner.png" alt="">
<div class="hero-text">
<h2 style="font-size: 20px">Natural Therapist</h2>
<button>Hire me</button>
</div>
</div>
<!--Nav-->
<nav class="navbar navbar-default navbar-expand-lg ">
<div class="container-fluid">
<a class="navbar-brand " href="#">Logo</a>
<button class="navbar-toggler btnMenu02 js-btnMenu" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarTogglerDemo" aria-expanded="false" aria-label="Toggle navigation">
<span><span></span></span>
</button>
<div class="collapse navbar-collapse " id="navbarToggler">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<!--/Nav-->
</header>
<script type="text/javascript">
$(function() {
$('.js-btnMenu').on('click', function() {
$(this).toggleClass('is-open');
});
});
</script>
<!--//Header
==================================-->
<!-- javascript (necessary for Bootstrap's JavaScript plugins) -->
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!--personal javascripts-->
<script src="assets/js/main.js"></script>
</body>
</html>
Basically, I am wanting this hamburger toggler to be of a smaller size suitable for a website or mobile. After much research and modifying the codes, I just find that altering the width and height of the .btnMenu02 abd changing the height of the span linesof the .btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after makes the cross icon kind of wonky and out of alignment. Is there a trick to resizing this toggler and making it smaller without affecting the alignment of the cross icon?
I am creating an animated html, css and jacavaript nav toggler for a therapy website which I have finally got working on all devices-but I am having trouble making it smaller without affecting the alignment of the cross after activating the toggler. This is my code:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap CSS-5.3.3 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!--Font Awesome-->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css">
<!-- Latest jQuery library for plugins that require it-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style type="text/css">
/*=========================Header========================*/
/*Navbar*/
.navbar{
position: absolute;
width: 100%;
top: 0;
}
/*hero banner*/
.hero-image{
/* Set a specific height */
height: 267px;
background-color:green;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*Hamburger toggler*/
button {
cursor: pointer;
background: none;
border: none;
outline: none;
appearance: none;
}
.btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btns_item {
margin: 0 20px;
text-align: center;
}
/* ------------------------------------------------------------ * #02 * ------------------------------------------------------------ */
.btnMenu02 {
width: 100px;
height: 100px;
background-color: #000;
}
.btnMenu02 > span {
display: block;
transition: all 0.4s ease-in-out;
}
.btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
display: block;
width: 70%;
height: 8px;
margin: 12px auto;
content: '';
background-color: #fff;
border-radius: 4px;
transition: all 0.2s ease-in-out;
}
.btnMenu02.is-open > span {
transform: rotate(180deg);
}
.btnMenu02.is-open > span > span {
opacity: 0;
}
.btnMenu02.is-open > span::before {
transform: translateY(20px) rotate(-45deg);
}
.btnMenu02.is-open > span::after {
transform: translateY(-20px) rotate(45deg);
}
/*//Hamburger toggler*/
</style>
</head>
<body>
<header>
<div class="hero-image">
<img class="hero-image" src="assets/images/banner.png" alt="">
<div class="hero-text">
<h2 style="font-size: 20px">Natural Therapist</h2>
<button>Hire me</button>
</div>
</div>
<!--Nav-->
<nav class="navbar navbar-default navbar-expand-lg ">
<div class="container-fluid">
<a class="navbar-brand " href="#">Logo</a>
<button class="navbar-toggler btnMenu02 js-btnMenu" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarTogglerDemo" aria-expanded="false" aria-label="Toggle navigation">
<span><span></span></span>
</button>
<div class="collapse navbar-collapse " id="navbarToggler">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<!--/Nav-->
</header>
<script type="text/javascript">
$(function() {
$('.js-btnMenu').on('click', function() {
$(this).toggleClass('is-open');
});
});
</script>
<!--//Header
==================================-->
<!-- javascript (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!--personal javascripts-->
<script src="assets/js/main.js"></script>
</body>
</html>
Basically, I am wanting this hamburger toggler to be of a smaller size suitable for a website or mobile. After much research and modifying the codes, I just find that altering the width and height of the .btnMenu02 abd changing the height of the span linesof the .btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after makes the cross icon kind of wonky and out of alignment. Is there a trick to resizing this toggler and making it smaller without affecting the alignment of the cross icon?
Share Improve this question asked Nov 21, 2024 at 19:27 FanglesFangles 74 bronze badges 1 |1 Answer
Reset to default 0If you could provide screenshots of how it looks after you've attempted, that would help.
However, I have changed the following with some success:
.btnMenu02 {
width: 50px;
height: 50px;
background-color: #000;
}
.btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
display: block;
width: 90%;
height: 4px;
margin: 6px auto;
content: '';
background-color: #fff;
border-radius: 4px;
transition: all 0.2s ease-in-out;
}
The key points that affected the weird look after resize was the margin: 12px auto; as this affected the lines escaping the box.
Also, since it was made smaller, the lines were too short in width so increasing it to 90% made it feel more in place.
I think to achieve whatever size you're after, you should adjust the value of the height and margin in proportion to your width and height of the background.
Full example:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap CSS-5.3.3 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!--Font Awesome-->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css">
<!-- Latest jQuery library for plugins that require it-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style type="text/css">
/*=========================Header========================*/
/*Navbar*/
.navbar{
position: absolute;
width: 100%;
top: 0;
}
/*hero banner*/
.hero-image{
/* Set a specific height */
height: 267px;
background-color:green;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*Hamburger toggler*/
button {
cursor: pointer;
background: none;
border: none;
outline: none;
appearance: none;
}
.btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btns_item {
margin: 0 20px;
text-align: center;
}
/* ------------------------------------------------------------ * #02 * ------------------------------------------------------------ */
.btnMenu02 {
width: 50px;
height: 50px;
background-color: #000;
}
.btnMenu02 > span {
display: block;
transition: all 0.4s ease-in-out;
}
.btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
display: block;
width: 90%;
height: 4px;
margin: 6px auto;
content: '';
background-color: #fff;
border-radius: 4px;
transition: all 0.2s ease-in-out;
}
.btnMenu02.is-open > span {
transform: rotate(180deg);
}
.btnMenu02.is-open > span > span {
opacity: 0;
}
.btnMenu02.is-open > span::before {
transform: translateY(20px) rotate(-45deg);
}
.btnMenu02.is-open > span::after {
transform: translateY(-20px) rotate(45deg);
}
/*//Hamburger toggler*/
</style>
</head>
<body>
<header>
<div class="hero-image">
<img class="hero-image" src="assets/images/banner.png" alt="">
<div class="hero-text">
<h2 style="font-size: 20px">Natural Therapist</h2>
<button>Hire me</button>
</div>
</div>
<!--Nav-->
<nav class="navbar navbar-default navbar-expand-lg ">
<div class="container-fluid">
<a class="navbar-brand " href="#">Logo</a>
<button class="navbar-toggler btnMenu02 js-btnMenu" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarTogglerDemo" aria-expanded="false" aria-label="Toggle navigation">
<span><span></span></span>
</button>
<div class="collapse navbar-collapse " id="navbarToggler">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a clas本文标签： javascriptResizing animated nav togglerStack Overflow
版权声明：本文标题：javascript - Resizing animated nav toggler - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736307715a1933410.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
zoom(orscale): developer.mozilla.org/en-US/docs/Web/CSS/zoom – ControlAltDel Commented Nov 21, 2024 at 19:34