collapse element
This commit is contained in:
monastyr
parent
8ad6d3fc7b
commit
502ec9a807
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="hello2">
|
<div class="hello2">
|
||||||
<transition-element></transition-element>
|
<!-- <transition-element></transition-element> -->
|
||||||
<!-- <sidenav-menu></sidenav-menu> -->
|
<sidenav-menu></sidenav-menu>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -1,223 +1,166 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- <transition name="menu-popover">
|
<div id="app">
|
||||||
<div id="sidenav-menu" v-bind:class="overlay" v-bind:style="{'width': widthValue}">
|
<nav class="side-navbar">
|
||||||
<div id="slide-element" v-on:click="changeWidth()">
|
<ul class="list-unstyled">
|
||||||
<div class='top_image'>
|
<li>
|
||||||
<img id="menu-icon" src="../img//page-first.svg" v-if="show"/>
|
<a>
|
||||||
<img id="menu-icon" src="../img//page-last.svg" v-if="!show"/>
|
<i class="ti-home"></i>Home</a>
|
||||||
</div>
|
</li>
|
||||||
</div>
|
<li v-for="(x, itemIndex) in sideBar" :key="itemIndex">
|
||||||
<div id="menu-links" v-if="show" >
|
<a @click="setActiveItemId(itemIndex)">
|
||||||
<div id="menu-links" class="overlay" v-if="show" >
|
<i class="fa" :class="x.icon"></i>{{x.name}}
|
||||||
<ul>
|
</a>
|
||||||
<li v-for="linkObj in menuLinks">
|
<ul :id="x.id" class="collapse list-unstyled show">
|
||||||
<a v-bind:href="linkObj.address">{{linkObj.name}}</a>
|
<transition-group name="list">
|
||||||
|
<li v-for="y in (activeItemId === itemIndex && isActive ? x.children : [])" :key="y.name">
|
||||||
|
<a>{{y.name}}</a>
|
||||||
|
</li>
|
||||||
|
</transition-group>
|
||||||
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</transition> -->
|
|
||||||
|
|
||||||
<div class="wrapper">
|
|
||||||
<span class="label">+</span><div class="contents">
|
|
||||||
<div class="inner">
|
|
||||||
<div id="slide-element" v-on:click="changeWidth()">
|
|
||||||
<div class='top_image'>
|
|
||||||
<img id="menu-icon" src="../img//page-first.svg" v-if="show"/>
|
|
||||||
<img id="menu-icon" src="../img//page-last.svg" v-if="!show"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="menu-links" v-if="show" >
|
|
||||||
<div id="menu-links" class="overlay" v-if="show" >
|
|
||||||
<ul>
|
|
||||||
<li v-for="linkObj in menuLinks">
|
|
||||||
<a v-bind:href="linkObj.address">{{linkObj.name}}</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
<style scoped>
|
export default {
|
||||||
/* Obrazek do menu*/
|
el: '#app',
|
||||||
|
methods: {
|
||||||
.wrapper {
|
setActiveItemId(itemIndex) {
|
||||||
background:#DDD;
|
if (itemIndex === this.activeItemId) {
|
||||||
display:inline-block;
|
this.activeItemId = ''
|
||||||
padding: 10px;
|
return
|
||||||
height: 20px;
|
}
|
||||||
width:auto;
|
this.activeItemId = itemIndex
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
message: 'Hello Vue.js!',
|
||||||
|
activeItemId: '',
|
||||||
|
sideBar: [{
|
||||||
|
name: "Dashboard",
|
||||||
|
url: "/dashboard",
|
||||||
|
icon: "ti-world",
|
||||||
|
children: [{
|
||||||
|
name: "Buttons",
|
||||||
|
url: "/components/buttons",
|
||||||
|
icon: "fa-book",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Social Buttons",
|
||||||
|
url: "/components/social-buttons",
|
||||||
|
icon: "icon-puzzle",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Components",
|
||||||
|
url: "/components",
|
||||||
|
icon: "ti-pencil-alt",
|
||||||
|
children: [{
|
||||||
|
name: "Buttons",
|
||||||
|
url: "/components/buttons",
|
||||||
|
icon: "fa-book",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Social Buttons",
|
||||||
|
url: "/components/social-buttons",
|
||||||
|
icon: "icon-puzzle",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Validation",
|
||||||
|
url: "/components",
|
||||||
|
icon: "ti-pencil-alt",
|
||||||
|
children: [{
|
||||||
|
name: "Buttons",
|
||||||
|
url: "/components/buttons",
|
||||||
|
icon: "fa-book",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Social Buttons",
|
||||||
|
url: "/components/social-buttons",
|
||||||
|
icon: "icon-puzzle",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isActive() {
|
||||||
|
return this.activeItemId !== ''
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
</script>
|
||||||
display: inline-block;
|
|
||||||
width: 1em;
|
|
||||||
|
<style>
|
||||||
|
.collapse.show {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contents, .contents .inner {
|
.collapse {
|
||||||
display:inline-block;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contents {
|
.list-unstyled {
|
||||||
white-space:nowrap;
|
padding-left: 0;
|
||||||
margin-left: -1em;
|
list-style: none;
|
||||||
padding-left: 1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contents .inner {
|
.collapse.list-unstyled {
|
||||||
background:#c3c;
|
padding-left: 15px;
|
||||||
width:0%;
|
}
|
||||||
overflow:hidden;
|
|
||||||
-webkit-transition: width 1s ease-in-out;
|
nav.side-navbar {
|
||||||
-moz-transition: width 1s ease-in-out;
|
background: #fff;
|
||||||
-o-transition: width 1s ease-in-out;
|
min-width: 250px;
|
||||||
transition: width 1s ease-in-out;
|
max-width: 250px;
|
||||||
|
color: #000;
|
||||||
|
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.side-navbar ul a:hover {
|
||||||
|
background: orange;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.side-navbar ul a {
|
||||||
|
padding: 10px 15px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
font-weight: 300;
|
||||||
|
border-left: 4px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.list-enter {
|
||||||
.wrapper:hover .contents .inner {
|
|
||||||
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.top_image {
|
|
||||||
/* width:950px;
|
|
||||||
background-color:white;
|
|
||||||
margin: 0px auto 0px auto;
|
|
||||||
background:red; */
|
|
||||||
text-align: center;
|
|
||||||
padding: 10px 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.top_image img {
|
|
||||||
margin: 0px auto 0px auto;
|
|
||||||
}
|
|
||||||
/*------------- Obrazek do menu -------------*/
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
width: 50px;
|
|
||||||
height: 90vh;
|
|
||||||
background-color: red;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.fade-enter {
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
.fade-enter-active {
|
.list-enter-active {
|
||||||
transition: opacity 0.25s;
|
animation: slide-in .5s ease-out forwards;
|
||||||
}
|
}
|
||||||
.fade-enter-to {
|
.list-leave-to, .list-leave-active {
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.fade-leave {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.fade-leave-active {
|
|
||||||
transition: opacity 2s;
|
|
||||||
}
|
|
||||||
.fade-leave-to {
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
animation: slide-out .5s ease-out forwards;
|
||||||
}
|
}
|
||||||
|
@keyframes slide-in {
|
||||||
.overlay #slide-element{
|
from { height: 0; } to { height: 40px; }
|
||||||
background: rebeccapurple;
|
|
||||||
position: relative;
|
|
||||||
top: 95%;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@keyframes slide-out {
|
||||||
/* wystylizowanie calosci */
|
from { height: 40px; } to { height: 0; }
|
||||||
#sidenav-menu{
|
|
||||||
position: left;
|
|
||||||
width: 10%;
|
|
||||||
height:100vh; /**/
|
|
||||||
background-color: green;
|
|
||||||
}
|
|
||||||
|
|
||||||
#burger-icon div{
|
|
||||||
/* przycisk burgera */
|
|
||||||
width: 35px;
|
|
||||||
height: 5px;
|
|
||||||
background-color: black;
|
|
||||||
margin: 6px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu-links ul li a{
|
|
||||||
background-color: yellow;
|
|
||||||
height:100vh; /**/
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#slide-element{
|
|
||||||
position: relative;
|
|
||||||
top: 0%;
|
|
||||||
height: 5%;
|
|
||||||
background-color: grey
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'sidenav-menu',
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
widthValue: 30
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created:{
|
|
||||||
widthValue: 30
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
changeWidth(){
|
|
||||||
this.show = !this.show;
|
|
||||||
if (this.show){
|
|
||||||
console.log(this.show);
|
|
||||||
this.widthValue = '20%';
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
console.log("False: ",this.show);
|
|
||||||
this.widthValue = '5%';
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
console.log(this.widthValue);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
menuLinks(){ //linki do menu głównego
|
|
||||||
//dane ze stora do głównego menu
|
|
||||||
return this.$store.state.menuLinks;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// function openNav() {
|
|
||||||
// document.getElementById("mySidenav").style.width = "250px";
|
|
||||||
// }
|
|
||||||
|
|
||||||
// function closeNav() {
|
|
||||||
// document.getElementById("mySidenav").style.width = "0";
|
|
||||||
// }
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -55,6 +55,7 @@ p {
|
|||||||
height: 0;
|
height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: 1s;
|
transition: 1s;
|
||||||
|
background-color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user