sirenav tana izlari bilan belgilanadi

Men bu haqda bir muncha vaqt ishlaganman va hali hech qanday imkoniyat yo'q. Bu yerda va boshqa joylarda topilgan turli xil echimlarni sinab ko'rdim, ammo hozirgacha hech narsa qilinmadi.

Bu yerda menda bir misol bor:

Fiddle namunasi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#navbarsExampleDefault {
  outline: 5px solid red;
  position: fixed;
  top: 0;
  right: -50%;
  background-color: black;
  z-index: -1;
  display: block;
}

.active-state {
  -webkit-transform: translate3d(-50%, 0, 0);
}

.navbar {
  outline: 5px solid red;
}
</div> </div>

va men nima qilmoqchi bo'lsam, mening sidenavimni tuzishim kerak. Bundan tashqari, navning barqaror bo'lishini xohlayman, shuning uchun sidenavni yopish uchun toggirga bosish imkoniyatiga ega bo'laman.

Hozirgi vaqtda, u turganidek, sidenav va tanani birga aylantiradi. Eng yomon vaziyat senariysi, men hech bo'lmaganda sidenavni aniqlab, butun tanani siljitishni istardim. Men sidenavni yopish uchun muqobil echimni topardim.

Bunga har qanday yordamni qadrlash kerak.

PS. Agar o'ngni olib tashlasam: -50% pozitsiyasi, sidenav ishlamayapti, u yuqoriga yopishadi. Lekin sidenavni tepaga, tomonga va tanaga o'rnatmoqchi bo'laman -50%.

0
Sizda javobingiz bormi? O'zingizning namunangizda sobit tartibli navigatsiya yoki chap navigatsiya qilishni xohlaysizmi, aniq emas. Arxivimda bir nechta misollarim bor. Agar siz hali ham yordam kerak bo'lsa, iltimos menga xabar bering
qo'shib qo'ydi muallif Babulaas, manba
Sizda javobingiz bormi? O'zingizning namunangizda sobit tartibli navigatsiya yoki chap navigatsiya qilishni xohlaysizmi, aniq emas. Arxivimda bir nechta misollarim bor. Agar siz hali ham yordam kerak bo'lsa, iltimos menga xabar bering
qo'shib qo'ydi muallif Babulaas, manba
Hey @Babulaas, men xohlagan narsa kaydırılabilir bo'lgan jismdir va sidenav yuqorisida o'rnatiladi. yo'q, men hali ham hal qilishni qidiraman.
qo'shib qo'ydi muallif Lucky500, manba
Hey Jonas, bu men izlayotgan ta'sirga juda yaqin. Siz bilan halol bo'lish uchun men bu dizaynni yoqtirmayman, lekin bu so'ralgan narsa edi. Boshqa hech qanday hal bo'lmasa, o'zingiz qabul qilaman, chunki hozirgi kunga qadar men o'zimdan ko'ra yaxshiroqdir.
qo'shib qo'ydi muallif Lucky500, manba
Hey Jonas, bu men izlayotgan ta'sirga juda yaqin. Siz bilan halol bo'lish uchun men bu dizaynni yoqtirmayman, lekin bu so'ralgan narsa edi. Boshqa hech qanday hal bo'lmasa, o'zingiz qabul qilaman, chunki hozirgi kunga qadar men o'zimdan ko'ra yaxshiroqdir.
qo'shib qo'ydi muallif Lucky500, manba
Hey Jonas, bu men izlayotgan ta'sirga juda yaqin. Siz bilan halol bo'lish uchun men bu dizaynni yoqtirmayman, lekin bu so'ralgan narsa edi. Boshqa hech qanday hal bo'lmasa, o'zingiz qabul qilaman, chunki hozirgi kunga qadar men o'zimdan ko'ra yaxshiroqdir.
qo'shib qo'ydi muallif Lucky500, manba
Hey Jonas, bu men izlayotgan ta'sirga juda yaqin. Siz bilan halol bo'lish uchun men bu dizaynni yoqtirmayman, lekin bu so'ralgan narsa edi. Boshqa hech qanday hal bo'lmasa, o'zingiz qabul qilaman, chunki hozirgi kunga qadar men o'zimdan ko'ra yaxshiroqdir.
qo'shib qo'ydi muallif Lucky500, manba
Hey @Babulaas, men xohlagan narsa kaydırılabilir bo'lgan jismdir va sidenav yuqorisida o'rnatiladi. yo'q, men hali ham hal qilishni qidiraman.
qo'shib qo'ydi muallif Lucky500, manba
Hey @Babulaas, men xohlagan narsa kaydırılabilir bo'lgan jismdir va sidenav yuqorisida o'rnatiladi. yo'q, men hali ham hal qilishni qidiraman.
qo'shib qo'ydi muallif Lucky500, manba
Hey @Babulaas, men xohlagan narsa kaydırılabilir bo'lgan jismdir va sidenav yuqorisida o'rnatiladi. yo'q, men hali ham hal qilishni qidiraman.
qo'shib qo'ydi muallif Lucky500, manba
Chrome'dan foydalanaman va z-index: 1 hech narsa qilmaydi
qo'shib qo'ydi muallif Lucky500, manba
Chrome'dan foydalanaman va z-index: 1 hech narsa qilmaydi
qo'shib qo'ydi muallif Lucky500, manba
Chrome'dan foydalanaman va z-index: 1 hech narsa qilmaydi
qo'shib qo'ydi muallif Lucky500, manba
Menimcha, bu yaqinlashmoqda: jsfiddle.net/jonigiuro/75cxuz6a/9 But I stopped Buning ustida ishlayapman, chunki men sizni noto'g'ri yo'ldan tushgan deb o'ylayman, siz butun HTML-ni yaxshilashingiz va uni boshqacha kiritishingiz kerak
qo'shib qo'ydi muallif Jonas Grumann, manba
Menimcha, bu yaqinlashmoqda: jsfiddle.net/jonigiuro/75cxuz6a/9 But I stopped Buning ustida ishlayapman, chunki men sizni noto'g'ri yo'ldan tushgan deb o'ylayman, siz butun HTML-ni yaxshilashingiz va uni boshqacha kiritishingiz kerak
qo'shib qo'ydi muallif Jonas Grumann, manba
Menimcha, bu yaqinlashmoqda: jsfiddle.net/jonigiuro/75cxuz6a/9 But I stopped Buning ustida ishlayapman, chunki men sizni noto'g'ri yo'ldan tushgan deb o'ylayman, siz butun HTML-ni yaxshilashingiz va uni boshqacha kiritishingiz kerak
qo'shib qo'ydi muallif Jonas Grumann, manba
Menimcha, bu yaqinlashmoqda: jsfiddle.net/jonigiuro/75cxuz6a/9 But I stopped Buning ustida ishlayapman, chunki men sizni noto'g'ri yo'ldan tushgan deb o'ylayman, siz butun HTML-ni yaxshilashingiz va uni boshqacha kiritishingiz kerak
qo'shib qo'ydi muallif Jonas Grumann, manba
z-index: 1; ni harakat qilib ko'ring
qo'shib qo'ydi muallif NathanielSantley, manba
z-index: 1; ni harakat qilib ko'ring
qo'shib qo'ydi muallif NathanielSantley, manba
Header va yon panelli tartibni yaratgan bo'lardim, shundan keyin faqat kontent kaydırılabilir divda o'ynaladi.
qo'shib qo'ydi muallif Ginger Squirrel, manba
Header va yon panelli tartibni yaratgan bo'lardim, shundan keyin faqat kontent kaydırılabilir divda o'ynaladi.
qo'shib qo'ydi muallif Ginger Squirrel, manba
Header va yon panelli tartibni yaratgan bo'lardim, shundan keyin faqat kontent kaydırılabilir divda o'ynaladi.
qo'shib qo'ydi muallif Ginger Squirrel, manba
Header va yon panelli tartibni yaratgan bo'lardim, shundan keyin faqat kontent kaydırılabilir divda o'ynaladi.
qo'shib qo'ydi muallif Ginger Squirrel, manba
Menga faqat tanasi vertikal ravishda o'giriladi. Siz qaysi brauzerni sinab ko'rmoqdasiz?
qo'shib qo'ydi muallif Rik Lewis, manba
Menga faqat tanasi vertikal ravishda o'giriladi. Siz qaysi brauzerni sinab ko'rmoqdasiz?
qo'shib qo'ydi muallif Rik Lewis, manba

6 javoblar

Yuqorida aytib o'tganimdek, men sizning fikringizni HTML-ni qayta tiklashingiz kerak, buning uchun men dizaynga sharh bermayman, lekin aniq kodni. Siz dizaynni saqlab qo'yishingiz va faqatgina HTML-ni qayta tiklashingiz mumkin.

Kichikroq sumkadan boshlang va siz xohlagan tarzda ishlashga harakat qiling va faqatgina barcha belgilarni, chegara radiuslarini va boshqa kichik teginishni qo'shing, shu bilan hamma narsani o'rnatish osonroq bo'ladi.

Agar siz so'ragan narsangizni to'g'ri tushunsangiz, shunga o'xshash narsa bilan boshlashingiz mumkin:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$("button").on('click', function() {
        $(".container").toggleClass("menu-open");
})
* {
  box-sizing: border-box;
}

.container {
  transition: margin-left 125ms ease-in-out;
  width: 100%;
  overflow: visible;
}

.navbar {
  position: fixed;
  top: 0;
  background-color: black;
  color: white;
  width: 100%;
  transition: margin-left 125ms ease-in-out;
}

button {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.navbar .dropdown {
  position: absolute;
  left: 100%;
  top: 0;
  width: 200px;
  background: #BADA55;
  padding: 40px;
}

.container.menu-open {
  margin-left: -200px;
}

.container.menu-open {
  margin-left: -200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="navbar">
    NavBar
    <button>
    Toggle Menu
    </button>
    <div class="dropdown">
      Dropdown
    </div>
  </div>
  
  <div class="content">
    

I add some content to make the scrollbar appear

    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eaque. Esse quidem aliquid laudantium ea, perspiciatis praesentium incidunt cupiditate autem excepturi dolorum officia voluptatem quasi ducimus non tenetur blanditiis, ipsum quam voluptates eveniet est. Magnam neque, quo error, ullam temporibus earum, architecto omnis cum totam facilis aut expedita tempora? Iste aliquam, libero itaque, animi alias pariatur quos iure recusandae neque quo. Assumenda consequuntur doloremque cumque rerum aperiam, blanditiis incidunt voluptatibus! Hic maxime saepe nostrum eligendi, eveniet optio temporibus earum ipsum sunt et, qui voluptatem odit corporis natus animi inventore non expedita autem. Facilis ea quam perferendis dignissimos beatae! Aperiam culpa porro impedit ullam aliquam officiis nesciunt itaque pariatur sapiente, vitae quos quibusdam fugit exercitationem eaque suscipit unde molestias, nobis natus vel non doloribus ab quidem saepe accusamus explicabo. Tenetur mollitia voluptate quae impedit sed aliquam quos tempore, necessitatibus ipsa repellendus cum ipsum at unde cupiditate eos eaque ratione vitae animi quisquam nisi, harum obcaecati nobis! Magni quo praesentium soluta accusantium quae officiis dolor ab eum et, debitis sit eos mollitia ex consequatur cum sapiente dolores iste doloremque ullam molestiae officia voluptatum! Quisquam enim quibusdam placeat porro, aut commodi illum, quos nostrum fugit a eligendi hic, sint voluptates. Et, quaerat, a.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eaque. Esse quidem aliquid laudantium ea, perspiciatis praesentium incidunt cupiditate autem excepturi dolorum officia voluptatem quasi ducimus non tenetur blanditiis, ipsum quam voluptates eveniet est. Magnam neque, quo error, ullam temporibus earum, architecto omnis cum totam facilis aut expedita tempora? Iste aliquam, libero itaque, animi alias pariatur quos iure recusandae neque quo. Assumenda consequuntur doloremque cumque rerum aperiam, blanditiis incidunt voluptatibus! Hic maxime saepe nostrum eligendi, eveniet optio temporibus earum ipsum sunt et, qui voluptatem odit corporis natus animi inventore non expedita autem. Facilis ea quam perferendis dignissimos beatae! Aperiam culpa porro impedit ullam aliquam officiis nesciunt itaque pariatur sapiente, vitae quos quibusdam fugit exercitationem eaque suscipit unde molestias, nobis natus vel non doloribus ab quidem saepe accusamus explicabo. Tenetur mollitia voluptate quae impedit sed aliquam quos tempore, necessitatibus ipsa repellendus cum ipsum at unde cupiditate eos eaque ratione vitae animi quisquam nisi, harum obcaecati nobis! Magni quo praesentium soluta accusantium quae officiis dolor ab eum et, debitis sit eos mollitia ex consequatur cum sapiente dolores iste doloremque ullam molestiae officia voluptatum! Quisquam enim quibusdam placeat porro, aut commodi illum, quos nostrum fugit a eligendi hic, sint voluptates. Et, quaerat, a.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eaque. Esse quidem aliquid laudantium ea, perspiciatis praesentium incidunt cupiditate autem excepturi dolorum officia voluptatem quasi ducimus non tenetur blanditiis, ipsum quam voluptates eveniet est. Magnam neque, quo error, ullam temporibus earum, architecto omnis cum totam facilis aut expedita tempora? Iste aliquam, libero itaque, animi alias pariatur quos iure recusandae neque quo. Assumenda consequuntur doloremque cumque rerum aperiam, blanditiis incidunt voluptatibus! Hic maxime saepe nostrum eligendi, eveniet optio temporibus earum ipsum sunt et, qui voluptatem odit corporis natus animi inventore non expedita autem. Facilis ea quam perferendis dignissimos beatae! Aperiam culpa porro impedit ullam aliquam officiis nesciunt itaque pariatur sapiente, vitae quos quibusdam fugit exercitationem eaque suscipit unde molestias, nobis natus vel non doloribus ab quidem saepe accusamus explicabo. Tenetur mollitia voluptate quae impedit sed aliquam quos tempore, necessitatibus ipsa repellendus cum ipsum at unde cupiditate eos eaque ratione vitae animi quisquam nisi, harum obcaecati nobis! Magni quo praesentium soluta accusantium quae officiis dolor ab eum et, debitis sit eos mollitia ex consequatur cum sapiente dolores iste doloremque ullam molestiae officia voluptatum! Quisquam enim quibusdam placeat porro, aut commodi illum, quos nostrum fugit a eligendi hic, sint voluptates. Et, quaerat, a. </div> </div>
</div> </div>

2
qo'shib qo'ydi
Jonas, bu meni hozirgi murabboatdan qutqarishi kerak.
qo'shib qo'ydi muallif Lucky500, manba

Yuqorida aytib o'tganimdek, men sizning fikringizni HTML-ni qayta tiklashingiz kerak, buning uchun men dizaynga sharh bermayman, lekin aniq kodni. Siz dizaynni saqlab qo'yishingiz va faqatgina HTML-ni qayta tiklashingiz mumkin.

Kichikroq sumkadan boshlang va siz xohlagan tarzda ishlashga harakat qiling va faqatgina barcha belgilarni, chegara radiuslarini va boshqa kichik teginishni qo'shing, shu bilan hamma narsani o'rnatish osonroq bo'ladi.

Agar siz so'ragan narsangizni to'g'ri tushunsangiz, shunga o'xshash narsa bilan boshlashingiz mumkin:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$("button").on('click', function() {
        $(".container").toggleClass("menu-open");
})
* {
  box-sizing: border-box;
}

.container {
  transition: margin-left 125ms ease-in-out;
  width: 100%;
  overflow: visible;
}

.navbar {
  position: fixed;
  top: 0;
  background-color: black;
  color: white;
  width: 100%;
  transition: margin-left 125ms ease-in-out;
}

button {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.navbar .dropdown {
  position: absolute;
  left: 100%;
  top: 0;
  width: 200px;
  background: #BADA55;
  padding: 40px;
}

.container.menu-open {
  margin-left: -200px;
}

.container.menu-open {
  margin-left: -200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="navbar">
    NavBar
    <button>
    Toggle Menu
    </button>
    <div class="dropdown">
      Dropdown
    </div>
  </div>
  
  <div class="content">
    

I add some content to make the scrollbar appear

    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eaque. Esse quidem aliquid laudantium ea, perspiciatis praesentium incidunt cupiditate autem excepturi dolorum officia voluptatem quasi ducimus non tenetur blanditiis, ipsum quam voluptates eveniet est. Magnam neque, quo error, ullam temporibus earum, architecto omnis cum totam facilis aut expedita tempora? Iste aliquam, libero itaque, animi alias pariatur quos iure recusandae neque quo. Assumenda consequuntur doloremque cumque rerum aperiam, blanditiis incidunt voluptatibus! Hic maxime saepe nostrum eligendi, eveniet optio temporibus earum ipsum sunt et, qui voluptatem odit corporis natus animi inventore non expedita autem. Facilis ea quam perferendis dignissimos beatae! Aperiam culpa porro impedit ullam aliquam officiis nesciunt itaque pariatur sapiente, vitae quos quibusdam fugit exercitationem eaque suscipit unde molestias, nobis natus vel non doloribus ab quidem saepe accusamus explicabo. Tenetur mollitia voluptate quae impedit sed aliquam quos tempore, necessitatibus ipsa repellendus cum ipsum at unde cupiditate eos eaque ratione vitae animi quisquam nisi, harum obcaecati nobis! Magni quo praesentium soluta accusantium quae officiis dolor ab eum et, debitis sit eos mollitia ex consequatur cum sapiente dolores iste doloremque ullam molestiae officia voluptatum! Quisquam enim quibusdam placeat porro, aut commodi illum, quos nostrum fugit a eligendi hic, sint voluptates. Et, quaerat, a.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eaque. Esse quidem aliquid laudantium ea, perspiciatis praesentium incidunt cupiditate autem excepturi dolorum officia voluptatem quasi ducimus non tenetur blanditiis, ipsum quam voluptates eveniet est. Magnam neque, quo error, ullam temporibus earum, architecto omnis cum totam facilis aut expedita tempora? Iste aliquam, libero itaque, animi alias pariatur quos iure recusandae neque quo. Assumenda consequuntur doloremque cumque rerum aperiam, blanditiis incidunt voluptatibus! Hic maxime saepe nostrum eligendi, eveniet optio temporibus earum ipsum sunt et, qui voluptatem odit corporis natus animi inventore non expedita autem. Facilis ea quam perferendis dignissimos beatae! Aperiam culpa porro impedit ullam aliquam officiis nesciunt itaque pariatur sapiente, vitae quos quibusdam fugit exercitationem eaque suscipit unde molestias, nobis natus vel non doloribus ab quidem saepe accusamus explicabo. Tenetur mollitia voluptate quae impedit sed aliquam quos tempore, necessitatibus ipsa repellendus cum ipsum at unde cupiditate eos eaque ratione vitae animi quisquam nisi, harum obcaecati nobis! Magni quo praesentium soluta accusantium quae officiis dolor ab eum et, debitis sit eos mollitia ex consequatur cum sapiente dolores iste doloremque ullam molestiae officia voluptatum! Quisquam enim quibusdam placeat porro, aut commodi illum, quos nostrum fugit a eligendi hic, sint voluptates. Et, quaerat, a.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eaque. Esse quidem aliquid laudantium ea, perspiciatis praesentium incidunt cupiditate autem excepturi dolorum officia voluptatem quasi ducimus non tenetur blanditiis, ipsum quam voluptates eveniet est. Magnam neque, quo error, ullam temporibus earum, architecto omnis cum totam facilis aut expedita tempora? Iste aliquam, libero itaque, animi alias pariatur quos iure recusandae neque quo. Assumenda consequuntur doloremque cumque rerum aperiam, blanditiis incidunt voluptatibus! Hic maxime saepe nostrum eligendi, eveniet optio temporibus earum ipsum sunt et, qui voluptatem odit corporis natus animi inventore non expedita autem. Facilis ea quam perferendis dignissimos beatae! Aperiam culpa porro impedit ullam aliquam officiis nesciunt itaque pariatur sapiente, vitae quos quibusdam fugit exercitationem eaque suscipit unde molestias, nobis natus vel non doloribus ab quidem saepe accusamus explicabo. Tenetur mollitia voluptate quae impedit sed aliquam quos tempore, necessitatibus ipsa repellendus cum ipsum at unde cupiditate eos eaque ratione vitae animi quisquam nisi, harum obcaecati nobis! Magni quo praesentium soluta accusantium quae officiis dolor ab eum et, debitis sit eos mollitia ex consequatur cum sapiente dolores iste doloremque ullam molestiae officia voluptatum! Quisquam enim quibusdam placeat porro, aut commodi illum, quos nostrum fugit a eligendi hic, sint voluptates. Et, quaerat, a. </div> </div>
</div> </div>

2
qo'shib qo'ydi
Jonas, bu meni hozirgi murabboatdan qutqarishi kerak.
qo'shib qo'ydi muallif Lucky500, manba

Siz uchun 2 oddiy demo topdim.

Birinchi jQuery bilan (yopishqoq menyuga o'ting):

http://www. jqueryscript.net/menu/Floating-Sticky-Slide-Menu-Plugin-With-jQuery-Slide-Menu.html

Boshqa bir yopishqoq yon panel menyusi. Bu juda muhim, ammo jQuery dan foydalanishni xohlamasangiz, menyudan kirib/chiqishi uchun html5/css3 animatsiyasidan foydalanishingiz mumkin:

https://css-tricks.com/scrollfollow-sidebar/

Siz izlayotgan narsa shumi?

0
qo'shib qo'ydi

Siz uchun 2 oddiy demo topdim.

Birinchi jQuery bilan (yopishqoq menyuga o'ting):

http://www. jqueryscript.net/menu/Floating-Sticky-Slide-Menu-Plugin-With-jQuery-Slide-Menu.html

Boshqa bir yopishqoq yon panel menyusi. Bu juda muhim, ammo jQuery dan foydalanishni xohlamasangiz, menyudan kirib/chiqishi uchun html5/css3 animatsiyasidan foydalanishingiz mumkin:

https://css-tricks.com/scrollfollow-sidebar/

Siz izlayotgan narsa shumi?

0
qo'shib qo'ydi

Men sizning CSS-ga bir nechta tahrirlarni (HTML-ni hech kimga bermagan bo'lsam-da, yuqoridagi plakatlarning kodingizni qanday tashkil etish kerakligi haqidagi tavsiyalari eshitilmasligi kerak)

https://jsfiddle.net/3s425ufa/

O'tkazishga o'tishdan o'zimni o'zgartiraman, chunki u brauzerlar tomonidan noto'g'ri talqin qilish uchun yaxshiroq qo'llab-quvvatlanadi. Umid qilamanki bu yordam beradi.

#main-container{
  position:relative;
  width:100%;
}
#navbarsExampleDefault {
  outline: 1px solid red;
  position: fixed;
  top: 50px;
  right: -50%;
  background-color: black;
  z-index: -1;
  display: block;
  transition: right 1s linear;
}

.active-state #navbarsExampleDefault {
  right:0;
  z-index: 100;
}
0
qo'shib qo'ydi

Men sizning CSS-ga bir nechta tahrirlarni (HTML-ni hech kimga bermagan bo'lsam-da, yuqoridagi plakatlarning kodingizni qanday tashkil etish kerakligi haqidagi tavsiyalari eshitilmasligi kerak)

https://jsfiddle.net/3s425ufa/

O'tkazishga o'tishdan o'zimni o'zgartiraman, chunki u brauzerlar tomonidan noto'g'ri talqin qilish uchun yaxshiroq qo'llab-quvvatlanadi. Umid qilamanki bu yordam beradi.

#main-container{
  position:relative;
  width:100%;
}
#navbarsExampleDefault {
  outline: 1px solid red;
  position: fixed;
  top: 50px;
  right: -50%;
  background-color: black;
  z-index: -1;
  display: block;
  transition: right 1s linear;
}

.active-state #navbarsExampleDefault {
  right:0;
  z-index: 100;
}
0
qo'shib qo'ydi