Мобильная версияЯ пробовал использовать разные методы, в том числе такие, как .bd-aside .btn[aria-expanded=" true"]::before {transform: Rotate(90deg);, используя элементы ::after и ::before, однако они не работали.
Раскрывающийся список неактивен:
Раскрывающийся список активен:
Мне бы хотелось, чтобы стрелка плавно поворачивалась на 180 градусов за 0,15 секунды.
Код: Выделить всё
// Navbar Dropdown
$(".ctx-dropdown-toggle").click(function () {
$(this).next(".dropdown-menu").slideToggle(600);
});Код: Выделить всё
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css");
/*navbar begin*/
.navbar {
height: 60px;
}
.navbar-brand {
--bs-navbar-brand-padding-y: 0px;
--bs-navbar-brand-margin-end: 0px;
}
.navbar-brand-text {
background: linear-gradient(to right, red, magenta, magenta, lime);
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 300% 100%;
background-position: left center;
transition: background 0.15s linear;
}
.navbar-brand:hover .navbar-brand-text {
background-position: 100% center;
}
.navbar-brand:focus {
outline: 2px solid #ffffff;
}
@media (max-width: 576px) {
.navbar-brand > .navbar-brand-text {
display: none;
}
}
@media (max-width: 370px) {
.navbar-brand {
display: none;
}
}
.navbar-toggler {
border-radius: 10px !important;
padding: 5px 10px !important;
transition: border-color 0.15s linear !important;
}
.navbar-toggler:hover {
border-color: #ff0000;
}
.navbar-toggler:focus {
box-shadow: 0px 0px 0px 3px rgba(255, 0, 0, 0.7) !important;
}
.nav-link {
color: #808080;
transition: color linear 0.15s;
}
.nav-link:hover {
color: #ff00ff;
}
.nav-link:focus {
color: #ff00ff;
}
/*navbar end*/
/*dropdown begin*/
.dropdown-menu {
background: #111;
--bs-dropdown-min-width: 100px;
--bs-dropdown-border-radius: 10px;
--bs-dropdown-border-width: 2px;
--bs-dropdown-border-color: #ff0000;
}
.dropdown-menu a {
color: #808080;
transition: color linear 0.15s;
}
.dropdown-menu a:hover {
color: #ff00ff;
background-color: #111;
}
.dropdown-menu a:focus {
color: #ff00ff;
background-color: #111;
}
.dropdown-divider {
border-top: 1px solid #252424;
}
.dropdown-item:active {
background: #111 !important;
}
.dropdown-item:focus {
background-color: #111;
color: #ff00ff !important;
}
.bi-chevron-up {
display: inline-block;
}
/*dropdown end*/Код: Выделить всё
Cratex Studios
[*] href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous" />
[/i]
[url=index.php]
[img]assets/images/logo-l.png[/img]
Cratex Studios
[/url]
[list]
[url=#]Company [/url]
& l t ; l i & g t ; & l t ; a c l a s s = " d r o p d o w n - i t e m t e x t - c e n t e r " h r e f = " a b o u t . p h p " & g t ; A b o u t U s & l t ; / a & g t ; & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; h r c l a s s = " d r o p d o w n - d i v i d e r " / & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a c l a s s = " d r o p d o w n - i t e m t e x t - c e n t e r " h r e f = " c o m p a n y / m i s s i o n . p h p " & g t ; M i s s i o n & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; h r c l a s s = " d r o p d o w n - d i v i d e r " / & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a c l a s s = " d r o p d o w n - i t e m t e x t - c e n t e r " h r e f = " c o m p a n y / p a r t n e r s . p h p " & g t ; P a r t n e r s & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; h r c l a s s = " d r o p d o w n - d i v i d e r " / & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a c l a s s = " d r o p d o w n - i t e m t e x t - c e n t e r " h r e f = " c o m p a n y / a f f i l i a t e s . p h p " & g t ; A f f i l i a t e s & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; h r c l a s s = " d r o p d o w n - d i v i d e r " / & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a c l a s s = " d r o p d o w n - i t e m t e x t - c e n t e r " h r e f = " c o m p a n y / l e g a l . p h p " & g t ; L e g a l I n f o & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; h r c l a s s = " d r o p d o w n - d i v i d e r " / & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a c l a s s = " d r o p d o w n - i t e m t e x t - c e n t e r " h r e f = " c o m p a n y / s u p p o r t . p h p " & g t ; S u p p o r t & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; h r c l a s s = " d r o p d o w n - d i v i d e r " / & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; & l t ; a c l a s s = " d r o p d o w n - i t e m t e x t - c e n t e r " h r e f = " c o m p a n y / t e a m . p h p " & g t ; O u r T e a m & l t ; / a & g t ; & l t ; / l i & g t ; < b r / > & l t ; / u l & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; / u l & g t ; < b r / > & l t ; b u t t o n < b r / > t y p e = " b u t t o n " < b r / > c l a s s = " b t n b t n - m e n u m t - 1 m s - 2 m e - 2 " < b r / > d a t a - b s - t o g g l e = " m o d a l " < b r / > d a t a - b s - t a r g e t = " # s i g n u p M o d a l " & g t ; < b r / > S i g n U p < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; b u t t o n < b r / > c l a s s = " n a v b a r - t o g g l e r " < b r / > t y p e = " b u t t o n " < b r / > d a t a - b s - t o g g l e = " o f f c a n v a s " < b r / > d a t a - b s - t a r g e t = " # r i g h t M a i n N a v " < b r / > a r i a - c o n t r o l s = " r i g h t M a i n N a v " < b r / > a r i a - l a b e l = " T o g g l e r i g h t n a v i g a t i o n " & g t ; < b r / > & l t ; i c l a s s = " b i b i - l i s t " & g t ; & l t ; / i & g t ; < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " o f f c a n v a s o f f c a n v a s - e n d b g - d a r k " t a b i n d e x = " - 1 " i d = " r i g h t M a i n N a v " a r i a - l a b e l l e d b y = " r i g h t M a i n N a v " & g t ; < b r / > & l t ; d i v c l a s s = " o f f c a n v a s - h e a d e r " & g t ; < b r / > & l t ; b u t t o n < b r / > t y p e = " b u t t o n " < b r / > c l a s s = " j u s t i f y - c o n t e n t - e n d o f f c a n v a s - c l o s e - b t n " < b r / > d a t a - b s - d i s m i s s = " o f f c a n v a s " < b r / > a r i a - l a b e l = " C l o s e " & g t ; < b r / > & l t ; i c l a s s = " b i b i - x - c i r c l e " & g t ; & l t ; / i & g t ; < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; h 5 c l a s s = " o f f c a n v a s - t i t l e " i d = " r i g h t M a i n N a v L a b e l " & g t ; O f f c a n v a s & l t ; / h 5 & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " o f f c a n v a s - b o d y j u s t i f y - c o n t e n t - e n d " & g t ; < b r / > & l t ; u l c l a s s = " n a v b a r - n a v t e x t - e n d " & g t ; < b r / > & l t ; l i c l a s s = " n a v - i t e m " & g t ; < b r / > & l t ; a c l a s s = " n a v - l i n k a c t i v e - l i n k " a r i a - c u r r e n t = " p a g e " h r e f = " # " & g t ; H o m e & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i c l a s s = " n a v - i t e m " & g t ; < b r / > & l t ; a c l a s s = " n a v - l i n k " h r e f = " # " & g t ; L i n k & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; / u l & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " o f f c a n v a s o f f c a n v a s - s t a r t b g - d a r k " t a b i n d e x = " - 1 " i d = " l e f t M a i n N a v " a r i a - l a b e l l e d b y = " l e f t M a i n N a v " & g t ; < b r / > & l t ; d i v c l a s s = " o f f c a n v a s - h e a d e r " & g t ; < b r / > & l t ; h 5 c l a s s = " o f f c a n v a s - t i t l e " i d = " l e f t M a i n N a v L a b e l " & g t ; O f f c a n v a s & l t ; / h 5 & g t ; < b r / > & l t ; b u t t o n < b r / > t y p e = " b u t t o n " < b r / > c l a s s = " b t n - c l o s e b t n - c l o s e - w h i t e " < b r / > d a t a - b s - d i s m i s s = " o f f c a n v a s " < b r / > a r i a - l a b e l = " C l o s e " & g t ; & l t ; / b u t t o n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " o f f c a n v a s - b o d y " & g t ; < b r / > & l t ; u l c l a s s = " n a v b a r - n a v d - f l e x " & g t ; < b r / > & l t ; l i c l a s s = " n a v - i t e m " & g t ; < b r / > & l t ; a c l a s s = " n a v - l i n k a c t i v e - l i n k " a r i a - c u r r e n t = " p a g e " h r e f = " # " & g t ; H o m e & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i c l a s s = " n a v - i t e m " & g t ; < b r / > & l t ; a c l a s s = " n a v - l i n k " h r e f = " # " & g t ; L i n k & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i c l a s s = " n a v - i t e m " & g t ; < b r / > & l t ; a < b r / > t y p e = " b u t t o n " < b r / > c l a s s = " b t n d - i n l i n e - f l e x a l i g n - i t e m s - c e n t e r b o r d e r - 0 n a v - l i n k " < b r / > d a t a - b s - t o g g l e = " c o l l a p s e " < b r / > a r i a - e x p a n d e d = " t r u e " < b r / > d a t a - b s - t a r g e t = " # c o m p o n e n t s - c o l l a p s e " < b r / > a r i a - c o n t r o l s = " c o m p o n e n t s - c o l l a p s e " & g t ; < b r / > C o m p o n e n t s < b r / > & l t ; / a & g t ; < b r / > & l t ; u l c l a s s = " l i s t - u n s t y l e d p s - 3 c o l l a p s e " i d = " c o m p o n e n t s - c o l l a p s e " & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a c l a s s = " d - i n l i n e - f l e x a l i g n - i t e m s - c e n t e r r o u n d e d t e x t - d e c o r a t i o n - n o n e " h r e f = " # a c c o r d i o n " < b r / > & g t ; A c c o r d i o n & l t ; / a < b r / > & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a c l a s s = " d - i n l i n e - f l e x a l i g n - i t e m s - c e n t e r r o u n d e d t e x t - d e c o r a t i o n - n o n e " h r e f = " # a l e r t s " & g t ; A l e r t s & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a c l a s s = " d - i n l i n e - f l e x a l i g n - i t e m s - c e n t e r r o u n d e d t e x t - d e c o r a t i o n - n o n e " h r e f = " # b a d g e " & g t ; B a d g e & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a c l a s s = " d - i n l i n e - f l e x a l i g n - i t e m s - c e n t e r r o u n d e d t e x t - d e c o r a t i o n - n o n e " h r e f = " # b r e a d c r u m b " < b r / > & g t ; B r e a d c r u m b & l t ; / a < b r / > & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a c l a s s = " d - i n l i n e - f l e x a l i g n - i t e m s - c e n t e r r o u n d e d t e x t - d e c o r a t i o n - n o n e " h r e f = " # b u t t o n s " < b r / > & g t ; B u t t o n s & l t ; / a < b r / > & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a c l a s s = " d - i n l i n e - f l e x a l i g n - i t e m s - c e n t e r r o u n d e d t e x t - d e c o r a t i o n - n o n e " h r e f = " # b u t t o n - g r o u p " < b r / > & g t ; B u t t o n g r o u p & l t ; / a < b r / > & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a c l a s s = " d - i n l i n e - f l e x a l i g n - i t e m s - c e n t e r r o u n d e d t e x t - d e c o r a t i o n - n o n e " h r e f = " # c a r d " & g t ; C a r d & l t ; / a & g t ; < b r / >
[*]
[url=#carousel]Carousel
[*]
Dropdowns
[*]
List group
[*]
Modal[/url]
[*]
[url=#navs]Navs[/url]
[*]
[url=#navbar]Navbar[/url]
[*]
[url=#pagination]Pagination
[*]
Popovers
[*]
Progress
[*]
Scrollspy
[*]
Spinners
[*]
Toasts[/url]
[*]
Tooltips
[/list]
Я включил фрагмент своей навигационной панели с раскрывающимся списком и стрелкой, находится рядом с ним. Надеюсь, это поможет!
Подробнее здесь: https://stackoverflow.com/questions/784 ... -activated
