add dropdown menu

content.php

@@ -0,0 +1,6 @@
+
+<div class="col-12 col-sm-9 col-md-8">
+    <?php
+        @include $getQ[0].'.php';
+    ?>
+</div>

css/styles.css

@@ -14477,25 +14477,30 @@ body {
 }
 
 /* line 5, global.scss */
+label {
+  margin: 0;
+}
+
+/* line 10, global.scss */
 .container {
   width: 100%;
   max-width: 1280px;
   padding: 0 20px;
 }
 
-/* line 11, global.scss */
+/* line 16, global.scss */
 .border {
   border: 1px solid red;
 }
 
-/* line 16, global.scss */
+/* line 21, global.scss */
 .middle {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
 }
 
-/* line 22, global.scss */
+/* line 27, global.scss */
 .middle-right {
   position: absolute;
   right: 0;
@@ -14503,7 +14508,7 @@ body {
   transform: translateY(-50%);
 }
 
-/* line 29, global.scss */
+/* line 34, global.scss */
 .full-middle {
   position: absolute;
   left: 50%;
@@ -14511,56 +14516,171 @@ body {
   transform: translate(-50%, -50%);
 }
 
-/* line 38, global.scss */
+/* line 43, global.scss */
 .bg-alpha {
   background: rgba(255, 255, 255, 0.5);
 }
 
-/* line 42, global.scss */
+/* line 47, global.scss */
 .radius {
   border-radius: 3px;
 }
 
-/* line 46, global.scss */
+/* line 51, global.scss */
 .radius-bottom {
   border-radius: 0 0 3px 3px;
 }
 
+/* line 55, global.scss */
+.banner {
+  background: #2e981e;
+  border: 1px solid #2e981e;
+  height: 60px;
+  width: 100%;
+  border-radius: 3px;
+  margin-bottom: 4px;
+}
+
+/* line 65, global.scss */
+#MainContent {
+  top: 90px;
+  z-index: 0;
+  min-height: 200vh;
+  overflow: hidden;
+}
+
+/* line 3, forms.scss */
+input, button {
+  border-radius: 3px;
+  margin: 5px 0;
+  -webkit-appearance: none;
+}
+/* line 7, forms.scss */
+input::-ms-clear, button::-ms-clear {
+  display: none;
+}
+/* line 10, forms.scss */
+input:focus, button:focus {
+  outline: none;
+}
+/* line 11, forms.scss */
+input::-moz-focus-inner, button::-moz-focus-inner {
+  border: 0;
+}
+
+/* line 14, forms.scss */
+input[type=text],
+input[type=password] {
+  border: 1px solid #aaa;
+  color: #aaa;
+  padding: 5px 20px;
+  width: 100%;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+/* line 24, forms.scss */
+input[type=button],
+input[type=submit],
+button {
+  background-color: #2e981e;
+  color: white;
+  text-align: center;
+  padding: 5px 20px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  border: none;
+  transition: .5s;
+}
+/* line 37, forms.scss */
+input[type=button]:hover,
+input[type=submit]:hover,
+button:hover {
+  color: white;
+  background-color: #aaa;
+}
+
+/* line 46, forms.scss */
+input[type="radio"],
+input[type="checkbox"] {
+  display: none;
+}
+/* line 50, forms.scss */
+input[type="radio"] + label::before,
+input[type="checkbox"] + label::before {
+  content: "";
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: solid 1px black;
+  background: transparent;
+  cursor: pointer;
+  vertical-align: middle;
+  margin: -4px 4px 0 0;
+  font-size: 1rem;
+  line-height: 10px;
+}
+/* line 65, forms.scss */
+input[type="radio"]:checked + label::before,
+input[type="checkbox"]:checked + label::before {
+  font-family: 'FontAwesome';
+  content: "\f00c";
+  padding: 0 0 1px 0;
+}
+
 /* line 2, header.scss */
 header {
-  background: #2e981e;
+  background: #58984e;
   height: 70px;
-  position: fixed;
   width: 100%;
 }
 /* line 8, header.scss */
+header .container.main {
+  height: 70px;
+  position: fixed;
+  background: #58984e;
+  z-index: 500;
+}
+/* line 16, header.scss */
 header .logo {
   position: fixed;
   top: 0;
   left: 0;
   height: 70px;
 }
-/* line 15, header.scss */
+/* line 23, header.scss */
 header .hamburger {
   position: fixed;
   top: 6px;
   right: 0;
 }
-/* line 22, header.scss */
-header .first {
+/* line 30, header.scss */
+header .openings {
   position: relative;
-  top: 110px;
-  height: 70px;
+  top: 0;
 }
-/* line 29, header.scss */
-header .hours {
+/* line 34, header.scss */
+header .openings .hours {
   font-size: 0.75rem;
+  text-align: left;
+  position: absolute;
+  top: 100px;
 }
-/* line 31, header.scss */
-header .hours span {
-  display: block;
+/* line 39, header.scss */
+header .openings .hours span {
+  display: inline;
+  border-right: 1px solid #aaa;
+  padding: 0 5px;
+}
+/* line 44, header.scss */
+header .openings .hours span:first-child {
+  padding: 0;
 }
-/* line 36, header.scss */
+/* line 48, header.scss */
+header .openings .hours span:first-child, header .openings .hours span:last-child {
+  border-right: none;
+}
+/* line 56, header.scss */
 header .topmenu {
   height: calc(100vh - 70px);
   position: fixed;
@@ -14570,8 +14690,9 @@ header .topmenu {
   width: 100%;
   display: none;
   overflow: auto;
+  z-index: 500;
 }
-/* line 46, header.scss */
+/* line 67, header.scss */
 header .topmenu ul {
   text-align: center;
   font-size: 1.125rem;
@@ -14581,24 +14702,24 @@ header .topmenu ul {
   padding: 0;
   line-height: 30px;
 }
-/* line 56, header.scss */
+/* line 77, header.scss */
 header .topmenu ul li {
   list-style: none;
   padding: 15px;
   display: block;
   border-top: 1px solid rgba(255, 255, 255, 0.6);
 }
-/* line 61, header.scss */
+/* line 82, header.scss */
 header .topmenu ul li a {
   color: white;
   text-decoration: none;
   transition: .4s;
 }
-/* line 65, header.scss */
+/* line 86, header.scss */
 header .topmenu ul li a:hover {
   color: rgba(255, 255, 255, 0.6);
 }
-/* line 73, header.scss */
+/* line 94, header.scss */
 header .breadcrumb {
   font-size: 0.75rem;
   padding: 5px;
@@ -14608,37 +14729,125 @@ header .breadcrumb {
   width: 100%;
   position: absolute;
   left: 0;
+  top: 70px;
   color: #aaa;
   height: 30px;
 }
-/* line 85, header.scss */
+/* line 107, header.scss */
 header .breadcrumb .container {
   overflow: hidden;
   overflow-x: auto;
 }
-/* line 88, header.scss */
+/* line 111, header.scss */
 header .breadcrumb .container .crumbs {
   height: 20px;
   display: ruby;
 }
-/* line 91, header.scss */
+/* line 114, header.scss */
 header .breadcrumb .container .crumbs a {
   color: #aaa;
   text-decoration: none;
   transition: .4s;
 }
-/* line 95, header.scss */
+/* line 118, header.scss */
 header .breadcrumb .container .crumbs a:hover {
   color: #666;
 }
 
+/* line 3, navigation.scss */
+.dropdown {
+  border-top: 3px solid #58984e;
+  border-bottom: 3px solid #58984e;
+  border-radius: 3px;
+  margin-bottom: 4px;
+  background: #eceeef;
+  transition: .4s;
+}
+/* line 11, navigation.scss */
+.dropdown .title {
+  font-size: 0.75rem;
+  font-weight: bold;
+  text-align: left;
+  padding: 10px;
+  position: relative;
+  cursor: pointer;
+  background: #58984e;
+  color: white;
+  transition: .4s;
+}
+/* line 22, navigation.scss */
+.dropdown .title:after {
+  content: '\f105';
+  font-family: 'FontAwesome';
+  position: absolute;
+  right: 10px;
+  transition: .4s;
+}
+/* line 33, navigation.scss */
+.dropdown:hover {
+  border-top: 3px solid #2e981e;
+  border-bottom: 3px solid #2e981e;
+}
+/* line 36, navigation.scss */
+.dropdown:hover .title {
+  background: #2e981e;
+}
+/* line 41, navigation.scss */
+.dropdown .items {
+  overflow: hidden;
+  height: 0px;
+  padding: 0 10px;
+  margin: 0;
+}
+/* line 47, navigation.scss */
+.dropdown .items li {
+  font-size: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid #aaa;
+  padding: 10px 0;
+  list-style: none;
+}
+/* line 54, navigation.scss */
+.dropdown .items li a {
+  color: #666;
+  text-decoration: none;
+  transition: .4s;
+  cursor: pointer;
+}
+/* line 59, navigation.scss */
+.dropdown .items li a:hover {
+  color: #aaa;
+}
+/* line 63, navigation.scss */
+.dropdown .items li:last-child {
+  border-bottom: none;
+}
+/* line 70, navigation.scss */
+.dropdown.active {
+  border-top: 3px solid #2e981e;
+  border-bottom: 3px solid #2e981e;
+}
+/* line 74, navigation.scss */
+.dropdown.active .title {
+  background: #2e981e;
+}
+/* line 76, navigation.scss */
+.dropdown.active .title:after {
+  transform: rotate(90deg);
+}
+/* line 80, navigation.scss */
+.dropdown.active .items {
+  height: auto;
+}
+
 @media only screen and (min-width: 768px) {
   /* line 5, mediaqueries/viewports/_768up.scss */
   header {
     background: #2e981e;
     height: 120px;
+    position: absolute;
   }
-  /* line 9, mediaqueries/viewports/_768up.scss */
+  /* line 10, mediaqueries/viewports/_768up.scss */
   header .logo {
     position: absolute;
     top: 10px;
@@ -14649,25 +14858,47 @@ header .breadcrumb .container .crumbs a:hover {
     background-repeat: no-repeat;
     background-position: left top;
   }
-  /* line 21, mediaqueries/viewports/_768up.scss */
-  header .container {
+  /* line 22, mediaqueries/viewports/_768up.scss */
+  header .container.main {
+    height: 120px;
+    position: relative;
+    background: #2e981e;
     background-image: url("../images/caduceus.png");
     background-size: 400px;
     background-repeat: no-repeat;
     background-position: left -60px top -60px;
   }
-  /* line 28, mediaqueries/viewports/_768up.scss */
-  header .first {
-    display: block;
+  /* line 34, mediaqueries/viewports/_768up.scss */
+  header .openings {
     position: relative;
     height: 80px;
     top: 0;
+    background: none;
+  }
+  /* line 40, mediaqueries/viewports/_768up.scss */
+  header .openings .hours {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(255, 255, 255, 0.5);
+    text-align: right;
+    border-radius: 0 0 3px 3px;
   }
-  /* line 35, mediaqueries/viewports/_768up.scss */
+  /* line 49, mediaqueries/viewports/_768up.scss */
+  header .openings .hours span {
+    display: block;
+    border-right: none;
+  }
+  /* line 53, mediaqueries/viewports/_768up.scss */
+  header .openings .hours span:first-child {
+    padding: 0 5px;
+  }
+  /* line 60, mediaqueries/viewports/_768up.scss */
   header .hamburger {
     display: none;
   }
-  /* line 39, mediaqueries/viewports/_768up.scss */
+  /* line 64, mediaqueries/viewports/_768up.scss */
   header .topmenu {
     height: 40px;
     position: relative;
@@ -14675,7 +14906,7 @@ header .breadcrumb .container .crumbs a:hover {
     top: 0px;
     display: block;
   }
-  /* line 46, mediaqueries/viewports/_768up.scss */
+  /* line 71, mediaqueries/viewports/_768up.scss */
   header .topmenu ul {
     text-align: right;
     font-size: 0.75rem;
@@ -14683,7 +14914,7 @@ header .breadcrumb .container .crumbs a:hover {
     margin: 0;
     line-height: 40px;
   }
-  /* line 53, mediaqueries/viewports/_768up.scss */
+  /* line 78, mediaqueries/viewports/_768up.scss */
   header .topmenu ul li {
     list-style: none;
     padding: 0 10px;
@@ -14691,8 +14922,17 @@ header .breadcrumb .container .crumbs a:hover {
     border: none;
     border-left: 1px solid rgba(255, 255, 255, 0.6);
   }
-  /* line 59, mediaqueries/viewports/_768up.scss */
+  /* line 84, mediaqueries/viewports/_768up.scss */
   header .topmenu ul li:first-child {
     border-left: none;
   }
+  /* line 91, mediaqueries/viewports/_768up.scss */
+  header .breadcrumb {
+    top: 120px;
+  }
+
+  /* line 98, mediaqueries/viewports/_768up.scss */
+  #MainContent {
+    top: 160px;
+  }
 }

header.php

@@ -1,19 +1,20 @@
 
 <header>
-    <div class="container">
+    <div class="container main">
         <div class="row">
             <div class="col-2 col-md-4"></div>
             <img class="logo" src="<?php echo $BASE_URLs;?>/images/header.png">
             <div class="col-12 col-sm-10 col-md-8 p-0">
             
-                <div class="text-right first">
-                    <div class="middle-right p-2 px-3 bg-alpha radius-bottom hours">
+                <div class="text-right openings d-none d-sm-block ">
+                    <div class="p-2 px-3 hours">
                         <span class="font-bold text-red">Orario di apertura sede:</span>
                         <span>Lun e Mar 9:00-14:00</span>
                         <span>Mer, Gio e Ven 9:00-14:00 e 15:30-18:30</span>
                         <span>Sab 9:00-13:00</span>
                     </div>
                 </div>
+                
             </div>
             <div class="hamburger hamburger--spin">
                 <div class="hamburger-box">
@@ -42,4 +43,13 @@
         </div>
     </div>
     
+    <div class="openings">
+        <div class="d-block d-sm-none p-1 hours">
+            <span class="font-bold text-red">Orario di apertura sede:</span>
+            <span>Lun e Mar 9:00-14:00</span>
+            <span>Mer, Gio e Ven 9:00-14:00 e 15:30-18:30</span>
+            <span>Sab 9:00-13:00</span>
+        </div>
+    </div>
+    
 </header> 

home.php

@@ -0,0 +1,10 @@
+
+<div class="row">
+    <div class="col-12 col-sm-6 col-md-4 border">
+        <div id="map"></div>
+    </div>
+
+    <div class="col-12 col-sm-6 col-md-8 border">
+        a
+    </div>
+</div>

index.php

@@ -54,11 +54,22 @@
 <body itemscope itemtype="http://schema.org/WebPage">
 
     <?php
-
         @include 'header.php';
-        @include $getQ[0].'.php';
-
     ?>
+    <section>
+        <div id="MainContent" class="container">
+            <div class="row">
+                <?php
+                
+                    @include 'menu-left.php';
+                    @include 'content.php';
+                    @include 'menu-right.php';
+                
+            //         @include $getQ[0].'.php';
+                ?>
+            </div>
+        </div>
+    </section>
 
 
     <script type="text/javascript" src="<?php echo $BASE_URL;?>/node_modules/jquery/dist/jquery.min.js"></script>

js/scripts.js

@@ -12,4 +12,18 @@ $(document).ready(function(){
     });
     
     
+    $('.dropdown .title').on('click', function(){
+        
+//         $('.dropdown').removeClass('active');
+        $(this).parent().toggleClass('active');
+        
+        if($(this).parent().hasClass('active')){
+            $('html, body').animate({
+                scrollTop: $(this).parent().offset().top
+            },500);
+        }
+
+    });
+    
+    
 }); 

menu-left.php

@@ -0,0 +1,57 @@
+
+<div class="col-12 col-sm-3 col-md-2 p-0">
+
+    <div class="dropdown active">
+        <div class="title">Area Riservata</div>
+        <ul class="items">
+            <li>
+                <form method="post">
+                    <label class="font-10">Username</label>
+                    <input type="text" name="usr" placeholder="username">
+                    
+                    <label class="font-10">Password</label>
+                    <input type="password" name="pwd" placeholder="password">
+                    <input type="submit" name="go" value="Accedi">
+                </form>
+            </li>
+            <li><a href="#">Richiedi dati di accesso</a></li>
+            <li><a href="#">Recupera password</a></li>
+        </ul>
+    </div>
+
+    <div class="dropdown">
+        <div class="title">Area pubblica</div>
+        <ul class="items">      
+            <li><a href="#">Modulistica </a></li>
+            <li><a href="#">Ricette e timbri</a></li>
+            <li><a href="#">Farmaci ritirati</a></li>
+        </ul>
+    </div>
+
+    <div class="dropdown">
+        <div class="title">Links utili</div>
+        <ul class="items">      
+            <li><a href="#">Cerca un Farmaco</a></li>
+            <li><a href="#">Siti istituzionali</a></li>
+            <li><a href="#">Siti informativi</a></li>
+            <li><a href="#">Farmaci</a></li>
+            <li><a href="#">A.S.L. della Provincia</a></li>
+            <li><a href="#">Consulenze</a></li>
+            <li><a href="#">Attività convenzionate</a></li>
+            <li><a href="#">Bilanci dell'Ordine</a></li>
+        </ul>
+    </div>
+
+    <div class="dropdown">
+        <div class="title">Contatti</div>
+        <ul class="items">
+            <li><a href="#">Presidenza</a></li>
+            <li><a href="#">Vice Presidenza</a></li>
+            <li><a href="#">Segreteria</a></li>
+            <li><a href="#">Tesoreria</a></li>
+            <li><a href="#">Consiglio</a></li>
+            <li><a href="#">Webmaster</a></li>
+        </ul>
+    </div>
+
+</div>

menu-right.php

@@ -0,0 +1,11 @@
+
+<div class="col-12 col-sm-12 col-md-2 p-0">
+    <div class="col-12 col-sm-3 col-md-12 banner"></div>
+    <div class="col-12 col-sm-3 col-md-12 banner"></div>
+    <div class="col-12 col-sm-3 col-md-12 banner"></div>
+    <div class="col-12 col-sm-3 col-md-12 banner"></div>
+    <div class="col-12 col-sm-3 col-md-12 banner"></div>
+    <div class="col-12 col-sm-3 col-md-12 banner"></div>
+    <div class="col-12 col-sm-3 col-md-12 banner"></div>
+    <div class="col-12 col-sm-3 col-md-12 banner"></div>
+</div>

scss/forms.scss

@@ -0,0 +1,71 @@
+
+
+input,button{
+    border-radius: 3px;
+    margin: 5px 0;
+    -webkit-appearance: none;
+    &::-ms-clear {
+        display: none;
+    }
+    &:focus {outline:none;}
+    &::-moz-focus-inner {border:0;}
+}
+
+input[type=text],
+input[type=password]{
+    border: 1px solid $grey;
+    color: $grey;
+    padding: 5px 20px;
+    width: 100%;
+    text-align: left;
+    box-sizing: border-box;
+}
+
+input[type=button],
+input[type=submit],
+button{
+
+    background-color: $green;
+    color: white;
+    text-align: center;
+    padding: 5px 20px;
+    font-size: $font-12;
+    cursor: pointer;
+    border: none;
+    transition: .5s;
+
+    &:hover{
+        color: white;
+        background-color: $grey;
+    }
+    
+}
+
+
+
+input[type="radio"],
+input[type="checkbox"]{
+    display: none;
+    
+    &+label::before {
+        content: "";
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        border: solid 1px black;
+        background: transparent;
+        cursor: pointer;
+        vertical-align: middle;
+        margin: -4px 4px 0 0;
+        font-size: 1rem;
+        line-height: 10px;
+    }
+
+    &:checked{
+        &+label::before{
+            font-family: 'FontAwesome';
+            content: "\f00c";
+            padding: 0 0 1px 0;
+            }
+        }
+}

scss/global.scss

@@ -2,6 +2,11 @@ body{
     font-family: 'Roboto';
 }
 
+label{ 
+    margin: 0;
+}
+
+
 .container{
     width: 100%;
     max-width: 1280px;
@@ -46,3 +51,20 @@ body{
 .radius-bottom{
     border-radius: 0 0 3px 3px;
 }
+
+.banner{
+    background: $green;
+    border: 1px solid $green;
+    height: 60px;
+    width: 100%;
+    border-radius: 3px;
+    margin-bottom: 4px;
+}
+
+
+#MainContent{
+    top: 90px;
+    z-index: 0;
+    min-height: 200vh;
+    overflow: hidden;
+}

scss/header.scss

@@ -1,10 +1,18 @@
 
 header{
-    background: $green;
+    background: $light-green;
     height: 70px;
-    position: fixed;
     width: 100%;
     
+    .container{
+        &.main{
+            height: 70px;
+            position: fixed;
+            background: $light-green;
+            z-index: 500;
+        }
+    }
+    
     .logo{
         position: fixed;
         top: 0;
@@ -19,17 +27,29 @@ header{
     }
     
     
-    .first{
+    .openings{
         position: relative;
-        top: 110px;
-        height: 70px;
-    }
+        top: 0;
 
+        .hours{
+            font-size: $font-12;
+            text-align: left;
+            position: absolute;
+            top: 100px;
+            span{
+                display: inline;
+                border-right: 1px solid $grey;
+                padding: 0 5px;
                 
-    .hours{
-        font-size: $font-12;
-        span{
-            display: block;
+                &:first-child{
+                    padding: 0;
+                }
+                
+                &:first-child,
+                &:last-child{
+                    border-right: none;
+                }
+            }
         }
     }
         
@@ -42,6 +62,7 @@ header{
         width: 100%;
         display: none;
         overflow: auto;
+        z-index: 500;
         
         ul{
             text-align: center;
@@ -79,12 +100,14 @@ header{
         width: 100%;
         position: absolute;
         left: 0;
+        top: 70px;
         color: $grey;
         height: 30px;
         
         .container{
-                overflow: hidden;
-                overflow-x: auto;
+            overflow: hidden;
+            overflow-x: auto;
+            
             .crumbs{
                 height: 20px;
                 display: ruby;

scss/main.scss

@@ -9,7 +9,9 @@
 
 @import "fonts";
 @import "global";
+@import "forms";
 @import "header";
+@import "navigation";
 
 
 

scss/mediaqueries/viewports/_768up.scss

@@ -5,6 +5,7 @@
 header{
     background: $green;
     height: 120px;
+    position: absolute;
     
     .logo{
         position: absolute;
@@ -17,19 +18,43 @@ header{
         background-position: left top;
     }
     
-        
     .container{
-        background-image: url('../images/caduceus.png');
-        background-size: 400px;
-        background-repeat: no-repeat;
-        background-position: left -60px top -60px;
+        &.main{
+            height: 120px;
+            position: relative;
+            background: $green;
+            background-image: url('../images/caduceus.png');
+            background-size: 400px;
+            background-repeat: no-repeat;
+            background-position: left -60px top -60px;
+        }
     }
         
-    .first{
-        display: block;
+
+    .openings{
         position: relative;
         height: 80px;
         top: 0;
+        background: none;
+
+        .hours{
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(255,255,255,0.5);
+            text-align: right;
+            border-radius: 0 0 3px 3px;
+            
+            span{
+                display: block;
+                border-right: none;
+                
+                &:first-child{
+                    padding: 0 5px;
+                }
+            }
+        }
     }
         
     .hamburger{
@@ -62,4 +87,14 @@ header{
             }
         }
     }
+    
+    .breadcrumb{
+        top: 120px;
+    }
+} 
+
+
+
+#MainContent{
+    top: 160px;
 }

scss/navigation.scss

@@ -0,0 +1,84 @@
+
+
+.dropdown{
+    border-top: 3px solid $light-green;
+    border-bottom: 3px solid $light-green;
+    border-radius: 3px;
+    margin-bottom: 4px;
+    background: $light-grey;
+    transition: .4s;
+    
+    .title{
+        font-size: $font-12;
+        font-weight: bold;
+        text-align: left;
+        padding: 10px;
+        position: relative;
+        cursor: pointer;
+        background: $light-green;
+        color: white;
+        transition: .4s;
+        
+        &:after{
+            content: '\f105';
+            font-family: 'FontAwesome';
+            position: absolute;
+            right: 10px;
+            transition: .4s;
+        }
+
+
+    }
+    
+    &:hover{
+        border-top: 3px solid $green;
+        border-bottom: 3px solid $green;
+        .title{
+            background: $green;
+        }
+    }
+    
+    .items{
+        overflow: hidden;
+        height: 0px;
+        padding: 0 10px;
+        margin: 0;
+        
+        li{
+            font-size: $font-12;
+            text-align: left;
+            border-bottom: 1px solid $grey;
+            padding: 10px 0;
+            list-style: none;
+            
+            a{
+                color: $dark-grey;
+                text-decoration: none;
+                transition: .4s;
+                cursor: pointer;
+                &:hover{
+                    color: $grey;
+                }
+            }
+            &:last-child{
+                border-bottom: none;
+            }
+        }
+    }
+    
+            
+    &.active{
+        border-top: 3px solid $green;
+        border-bottom: 3px solid $green;
+
+        .title{
+            background: $green;
+            &:after{
+                transform: rotate(90deg);
+            }
+        }
+        .items{
+            height: auto;
+        }
+    }
+} 

scss/variables.scss

@@ -68,6 +68,7 @@ $font-53: 3.312rem;     /* 53px */
 
 $alpha:         rgba(255,255,255,0.6);
 $green:         #2e981e;//#67a562; 
+$light-green:   #58984e;
 $red:           #aa0000;
 $grey:          #aaa;
 $light-grey:    #eceeef;