Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Bootstrap Accordion - Header zuerst einblenden
#1
Hallo Forum
 
Ich bin eigentlich kein Webentwickler und arbeite erst seit kurzer Zeit mit Javascript und Co. Beim folgenden Hamburger-Accordion funktioniert schonmal einiges - aber leider nicht alles. 
 
Der Head mit Background blendet erst verspätet ein, wenn das Menü fertig ausgefahren ist. Ziel wäre es, dass der invertierende Header mit dem Background zuerst einblendet und erst dann der Content mit dem Menü langsam ausfährt.
 
Die Sache habe ich bis jetzt so aufgebaut:
- Das Logo-Bild toggelt mit show-ctrl / hide-ctrl und CSS
- Die Scroll-Funktion in Javascript schrumpft das Logo
- Der Button toggelt mit fa-plus / fa-minus und blendet den dunklen Background ein.
 
Weiss hier jemand weiter? Oder hab ihr einen anderen Ansatz für das gleiche Ergebnis?
Danke im Voraus!
 
Übrigens, ist es möglich hier eine Vorschau einzubetten?


HTML5
  1. <!DOCTYPE html>
  2. <html lang="de">
  3.     <head>
  4.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  5.         <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
  6.         <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  7.         <style>button.btn .show-ctrl {
  8.     display: none;
  9. }
  10.  
  11. button.btn .hide-ctrl {
  12.     display: block;
  13. }
  14.  
  15. button.btn.collapsed .show-ctrl {
  16.     display: block;
  17. }
  18.  
  19. button.btn.collapsed .hide-ctrl {
  20.     display: none;
  21. }
  22.  
  23. #logo {
  24.     transition: 0.4s;
  25. }
  26.  
  27. .background {
  28.     background-color: #65818b;
  29. }
  30.  
  31. .card-groups .card {
  32.     overflow: hidden;
  33.     position: fixed;
  34.     width: 100%;
  35.     max-width: 600px;
  36.     border-radius: 0;
  37.     margin-bottom: 5px;
  38. }
  39.  
  40. .card-groups .more-less {
  41.     float: right;
  42.     color: #65818b;
  43.     font-size: 20px;
  44.     padding: 12px;
  45. }
  46.  
  47. .navi-mobile {
  48.     display: flex;
  49.     justify-content: center;
  50.     padding-top: 5px;
  51.     padding-bottom: 5px;
  52.     font-family: Dosis;
  53.     font-size: 17px;
  54.     font-weight: 700;
  55.     text-transform: uppercase;
  56.     text-decoration: none;
  57.     color: white;
  58. }
  59.  
  60. .navi-mobile:hover {
  61.     color: #323232;
  62.     text-decoration: none;
  63. }
  64.  
  65. .navi-mobile:active {
  66.     color: #f7ac48;
  67. }</style>
  68.     </head>
  69.     <body style="display: grid; grid-template-columns: 1fr auto minmax(320px, 600px) 1fr; grid-template-rows: minmax(65px, 1fr) auto; grid-template-areas: '. . header-mobile .' '. navi content .';">
  70.         <header style="grid-area:1 / 3 / 2 / 4;">
  71.             <div id="panels1" role="tablist" class="card-groups">
  72.                 <div class="card border-0 rounded-0">
  73.                     <div role="tab" class="card-heading">
  74.                         <h5 class="mb-0"> <div class="span1">
  75. </div><a data-toggle="collapse" href="#collapse1" aria-expanded="true" aria-controls="collapse1" class="card-title"> <i class="fa fa-plus more-less"></i></a> </h5>
  76.                         <button class="collapsed btn w-50" a data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
  77.                             <span class="show-ctrl"> <img src="https://s17.directupload.net/images/191022/ur6x7k43.png" id="logo" height="50px" class="float-left"></span>
  78.                             <span class="hide-ctrl"> <img src="https://s17.directupload.net/images/191022/aomekiig.png" id="logo2" height="50px" class="float-left"></span>
  79.                         </button>                       
  80.                     </div>                   
  81.                     <div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#panels1">
  82.                         <div class="card-body background">
  83.                             <a href="#" class="navi-mobile pt-3">Angebot</a>
  84.                             <a href="#" class="navi-mobile">Studio</a>
  85.                             <a href="#" class="navi-mobile pb-4">Kontakt</a>
  86.                         </div>                       
  87.                     </div>                   
  88.                 </div>               
  89.             </div>
  90.         </header>
  91.         <main style="grid-area:content;">
  92.             <img src="http://pinegrow.com/placeholders/img10.jpg" class="w-100">
  93.             <img src="http://pinegrow.com/placeholders/img14.jpg" class="w-100">
  94.             <img src="http://pinegrow.com/placeholders/img18.jpg" class="w-100">
  95.         </main>
  96.         <script src="assets/js/jquery.min.js"></script>
  97.         <script src="assets/js/popper.js"></script>
  98.         <script src="bootstrap/js/bootstrap.min.js"></script>
  99.         <script>// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
  100. window.onscroll = function() {scrollFunction()};
  101.  
  102. function scrollFunction() {
  103.   if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
  104.     document.getElementById("logo").style.padding = "0px 0px";
  105.     document.getElementById("logo").style.height = "30px";
  106.   } else {
  107.     document.getElementById("logo").style.padding = "0px 0px";
  108.     document.getElementById("logo").style.height = "50px";
  109.   }
  110. }</script>
  111.         <script>function toggleIcon(e) {
  112.  
  113.   let myhead = $(e.target)
  114.     .prev('.card-heading');
  115.   myhead
  116.     .find(".more-less")
  117.     .toggleClass('fa-plus fa-minus text-light');
  118.  
  119.   myhead.toggleClass('background').find('.card-title')
  120.     .find('a').toggleClass('text-white');
  121.  
  122. }
  123. $('.card-groups').on('hidden.bs.collapse shown.bs.collapse', toggleIcon);</script>
  124.     </body>
  125. </html>


Zitieren
#2
So sollte es gehen:
Javascript
  1. <script>
  2.         //When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
  3.         window.onscroll = function() {
  4.             scrollFunction()
  5.         };
  6.  
  7.         function scrollFunction() {
  8.             if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
  9.                 document.getElementById("logo").style.padding = "0px 0px";
  10.                 document.getElementById("logo").style.height = "30px";
  11.             } else {
  12.                 document.getElementById("logo").style.padding = "0px 0px";
  13.                 document.getElementById("logo").style.height = "50px";
  14.             }
  15.         }
  16.  
  17.         $('.more-less').click(function() {
  18.             $('.card-heading').toggleClass('background')
  19.  
  20.         })
  21.  
  22.         function toggleIcon(e) {
  23.  
  24.             let myhead = $(e.target)
  25.                 .prev('.card-heading');
  26.             myhead
  27.                 .find(".more-less")
  28.                 .toggleClass('fa-plus fa-minus text-light');
  29.  
  30.             myhead.find('.card-title')
  31.                 .find('a').toggleClass('text-white');
  32.  
  33.         }
  34.         $('.card-groups').on('hidden.bs.collapse shown.bs.collapse', toggleIcon);
  35.     </script>


Zitieren
#3
Hey, vielen Dank für deine Antwort!!

Auf den ersten Blick funktioniert es beim Logo und beim Hintergrund - aber beim Button leider noch nicht. Der kommt nach wie vor verspätet.

Ein anderer Grund bereitet mir aber noch mehr Sorgen... Die Idee mit der click function hatte ich schonmal so ähnlich probiert, hab dann aber diesen Ansatz wieder verworfen. Wenn man schnell hintereinander auf den Button klickt kommt das Script "nicht nach". Es erscheint dann das graue Logo auf grauen Background, bzw. weisses Logo auf weissem Background. Also leider eher als Notlösung zu gebrauchen. Ideal wäre eine Funktion in Abhängigkeit von collapse/collapsed anstatt click? Geht das?
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Bootstrap 4 Mega Menu
Last Post: The-Error
08.12.2019 12:57
» Replies: 2
» Views: 621
max-width Layout-Breite
Last Post: The-Error
12.11.2019 17:12
» Replies: 1
» Views: 335
Multi-Language in 10.0.8
Last Post: bootshock
01.11.2019 23:19
» Replies: 0
» Views: 405

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 328
» Latest member: michi323
» Forum threads: 256
» Forum posts: 1.007

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently 13 online users. [Complete List]
» 1 Member(s) | 12 Guest(s)
Avatar

>