I have successfully implemented a dropdown menu using ul and li elements. Through a for loop, I was able to dynamically generate the li elements. The class nav-is-visible helps in displaying the li elements when the user clicks on the dropdown menu. However, I am facing difficulty in figuring out how to display the currently selected value. Below is an excerpt of my code:
Update: Here's the link to my updated codepen: https://codepen.io/Issaki/pen/OYxbJV
Update: I am still struggling with this issue, any assistance would be greatly appreciated.
<template>
<div>
<nav :class="{'nav-is-visible' : displayCategory}">
<ul>
<li v-for="item in items" :key="item.id" @click="displayCategory = !displayCategory">
<p>{{item.name}}</p>
</li>
</ul>
</nav>
</div>
</template>
<script>
export default {
data() {
return {
displayCategory: false,
items: [
{
id: 1,
name: "Basketball"
},
{
id: 2,
name: "Soccerr"
}
]
};
},
methods: {
},
computed: {}
};
</script>
<style>
nav {
width: 100%;
top: 90px;
left: 0;
z-index: 3;
height: 45px;
line-height: 45px;
vertical-align: middle;
display: inline-block;
font-size: 0.1px;
font-weight: 300;
font-style: normal;
cursor: pointer;
padding: 0;
cursor: pointer;
transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out;
}
/* Create the bordera and the surrounding */
nav ul {
height: 45px;
padding: 0 10px;
text-align: left;
border: 1px solid #33383b;
background: #fafafa;
border-radius: 3px;
}
nav ul li {
display: block;
position: relative;
}
nav ul li:first-child:before {
position: absolute;
content: " Menu ";
position: relative;
font-size: 1.6rem;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
}
nav ul li:first-child:after {
position: absolute;
top: 0;
right: 0;
font-size: 12px;
font-size: 1.2rem;
content: "\f0d7";
color: #2267b9;
padding-right: 10px;
}
/* Hide the li elements */
nav p {
display: none;
font-size: 1.5rem;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
color: #4a5564;
}
#category-btn {
display: none;
}
.category-input {
display: none;
}
nav.nav-is-visible ul {
height: initial;
background: #f1f1f1;
}
nav.nav-is-visible ul li:first-child:after {
content: "\f00d";
}
nav.nav-is-visible ul li p {
display: block;
border-bottom: 2px solid #f1f1f1;
}
nav.nav-is-visible ul li p:hover {
border-bottom: 2px solid #4a5564;
}
nav.nav-is-visible ul li:last-child {
margin-bottom: 10px;
}
/* Make button visible again when nav-is-visible class is toggled */
nav.nav-is-visible #category-btn {
display: block;
}
</style>