Merge pull request #7 from MathisBurger/dev

merge v1.0.2

README.md

@@ -71,4 +71,5 @@ Check out the easy to use documentation and play arround with it.
 - <a href="documentation/navbar.md">Navbar</a>
 - <a href="documentation/sidebar.md">Sidebar</a>
 - <a href="documentation/cards.md">Cards</a>
+- <a href="documentation/dropdown.md">Dropdown</a>
 - <a href="documentation/scripts.md">Scripts</a>

documentation/dropdown.md

@@ -0,0 +1,69 @@
+# Dropdown documentation
+
+This part of the documentation will show you how to use the<br>
+included dropdown menus of ChocolateCSS.
+
+# Basic usage
+
+Using single page dropdown menus with ChocolateCSS is very easy.
+
+```html
+<div class="dropdown dropdown-dark active">
+    <div class="dropdown-menu">
+        <div class="dropdown-menu-item">Item 1</div>
+        <div class="dropdown-menu-item">Item 2</div>
+    </div>
+</div>
+```
+
+The other `div` tag contains three classes. The `dropdown` class defines the general structure of the dropdown.<br>
+The `dropdown-dark` class defines the theme of the dropdown.
+There are three different themes available.
+
+- `dropdown-light`
+- `dropdown-grey`
+- `dropdown-dark`
+
+The `active` class sets the visibility of the dropdown. `active` means, that the dropdown fades in from the top.
+
+Into the other `div` you will have to put a div with the class `dropdown-menu`. Into this you can put your menu elements.<br>
+To define a menu element, you need to put a div into your menu `div` and add another `div` with the class `dropdown-menu-item`.
+
+# Multiple menus
+
+Multiple menus in one dropdown menu are also possible. 
+
+```html
+<div class="dropdown dropdown-dark active">
+    <div class="dropdown-menu" id="main-menu">
+        <div class="dropdown-menu-item" onclick="DropdownForwardMenu('main-menu', 'sec-menu');">Item 1</div>
+        <div class="dropdown-menu-item">Item 2</div>
+    </div>
+    <div class="dropdown-submenu" id="sec-menu">
+        <div class="dropdown-menu-item" onclick="DropdownBackwardMenu('sec-menu', 'main-menu');">Item 3</div>
+        <div class="dropdown-menu-item">Item 4</div>
+    </div>
+</div>
+```
+
+To get multiple menus in one dropdown to work, you will have to add the `dropdown-toggler.js` script to your html body.
+
+```html
+<script src="js/dropdown-toggler.js"></script>
+```
+
+After that you can go on with adding a submenu.<br>
+The structure of the submenu is equal to the structure of 
+default dropdown menu. Just change the class to `dropdown-submenu`.
+
+```html
+<div class="dropdown-submenu">
+    <div class="dropdown-menu-item">Item 3</div>
+    <div class="dropdown-menu-item">Item 4</div>
+</div>
+```
+
+Your submenu is hidden now.<br>
+To make them callable, you will need to add an id to every menu (Look main example).
+
+Check out the <a href="./scripts.md">script documentation</a> to learn how to toggle between the different menus of the dropdown.

documentation/scripts.md

@@ -23,4 +23,30 @@ Just add this to the bottom of your HTML body.
 <script src="<pathToJsFolder>/sidebar-toggler.js"></script>
 ```
 
+# Dropdown script
 
+Use the `dropdown-toggler.js` script if you want to switch between different menus in your dropdown.
+
+```html
+<script src="<pathToJsFolder>/dropdown-toggler.js"></script>
+```
+
+Now you can use the script to switch between the menus.
+
+There are two different functions you can use.
+
+`DropdownForwardMenu`
+You can use this function to switch to a new sub menu.
+Its syntax is quite easy.
+```js
+DropdownForwardMenu('from', 'to');
+```
+Just call the function and replace the string parameters with the ids of the menus, you want to switch.
+
+Same with the `DropdownBackwardMenu` function.
+
+```js
+DropdownBackwardMenu('from', 'to');
+```
+
+Its usage is the same as the usage of the `DropdownForwardMenu` function.

dropdown/animations.scss

@@ -0,0 +1,79 @@
+@import "./dropdown.scss";
+
+.dropdown.active {
+    display: flex;
+    animation-name: showDropdown;
+    animation-fill-mode: forwards;
+    animation-duration: 1s;
+}
+
+@keyframes showDropdown {
+    from {
+        top: -100%;
+        opacity: 0.5;
+    }
+    to {
+        top: 2.5%;
+        opacity: 1;
+    }
+}
+
+.old-out {
+    animation-name: oldOut;
+    animation-duration: .3s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes oldOut {
+    from  {
+        left: 0;
+    }
+    to {
+        left: -100%;
+    }
+}
+
+.old-in {
+    animation-name: oldIn;
+    animation-duration: .3s;
+    animation-fill-mode: backwards;
+}
+
+@keyframes oldIn {
+    from  {
+        left: 0;
+    }
+    to {
+        left: -100%;
+    }
+}
+
+.new-out {
+    animation-name: newOut;
+    animation-duration: .3s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes newOut {
+    from  {
+        right: -10px;
+    }
+    to {
+        right: -100%;
+    }
+}
+
+.new-in {
+    animation-name: newIn;
+    animation-duration: .3s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes newIn {
+    from  {
+        right: -100%;
+    }
+    to {
+        right: -10px;
+    }
+}

dropdown/dropdown.scss

@@ -0,0 +1,10 @@
+.dropdown {
+    width: fit-content;
+    height: fit-content;
+    border-radius: 12px;
+    padding: 10px 10px 10px 10px;
+    display: none;
+    position: absolute;
+    top: -100%;
+    overflow: hidden;
+}

dropdown/menu.scss

@@ -0,0 +1,27 @@
+.dropdown-menu {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.dropdown-submenu {
+    @extend .dropdown-menu;
+    position: absolute;
+    right: -100%;
+}
+
+.dropdown-menu-item {
+    width: 200px;
+    height: 50px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border-radius: 7px;
+    transition: .3s;
+}
+
+.dropdown-menu-item:hover {
+    filter: brightness(2);
+}

dropdown/theme.scss

@@ -0,0 +1,17 @@
+@import "./dropdown.scss";
+@import "./menu.scss";
+
+@mixin dropdownTheme($class-name, $bg-color, $text-color) {
+
+    .dropdown.#{$class-name} {
+        background: $bg-color;
+        box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+    }
+
+    .#{$class-name} .dropdown-menu-item {
+        color: $text-color;
+        font-family: "Roboto", sans-serif;
+        font-size: 1.2em;
+        background: $bg-color;
+    }
+}  

js/dropdown-toggler.js

@@ -0,0 +1,34 @@
+
+
+function DropdownForwardMenu(from, to) {
+
+    let fromElement = document.getElementById(from);
+    removeUnusedClasses(fromElement);
+
+    let toElement = document.getElementById(to);
+    removeUnusedClasses(toElement);
+
+    fromElement.classList.add('old-out');
+    toElement.classList.add('new-in');
+
+}
+
+function DropdownBackwardMenu(from, to) {
+
+    let fromElement = document.getElementById(from);
+    removeUnusedClasses(fromElement);
+
+    let toElement = document.getElementById(to);
+    removeUnusedClasses(toElement);
+
+    fromElement.classList.add('new-out');
+    toElement.classList.add('old-in');
+}
+
+function removeUnusedClasses(element) {
+
+    element.classList.contains('old-out') ? element.classList.remove('old-out') : null;
+    element.classList.contains('old-in') ? element.classList.remove('old-in') : null;
+    element.classList.contains('new-out') ? element.classList.remove('new-out') : null;
+    element.classList.contains('new-in') ? element.classList.remove('new-in') : null;
+}

main.scss

@@ -27,6 +27,13 @@
 @import "./cards/responsive.scss";
 
 
+// Dropdown
+@import "./dropdown/dropdown.scss";
+@import "./dropdown/menu.scss";
+@import "./dropdown/theme.scss";
+@import "./dropdown/animations.scss";
+
+
 
 // Buttons
 @include buttonBase(btn-blue, #1d3bae, #264BD9, #fff);
@@ -62,3 +69,8 @@
 @include cardTheme(card-light, #fff, rgba(0,0,0,0.4), #000);
 @include cardTheme(card-grey, #303030, rgba(0,0,0,0.6), #fff);
 @include cardTheme(card-dark, #161616, rgba(0,0,0,0.6), #fff);
+
+// Dropdown
+@include dropdownTheme(dropdown-light, rgb(221, 221, 221), #000);
+@include dropdownTheme(dropdown-grey, rgb(153, 153, 153), #fff);
+@include dropdownTheme(dropdown-dark, #232323, #fff);