Navigational skip code

This is the first day of my participation in the August More Text challenge

August more text first play, handwritten side navigation bar

This article is for beginners

In daily development, there are all kinds of things that need to be implemented, and the first problem I encountered when I first got into front-end development was the navigation bar

Because I don’t like using UI components, I need to write CSS by hand for all kinds of styles, mainly in order to improve the technology in the case of technical shortage. Similarly, the overall progress of the project should not be delayed.

Let’s look at the code first

<div class="sidebar">
    <div>Personal home page</div>
    <div :class="1 == count ? 'k' : ''">
        <div @click="up(1)">
            <div :class="1 == a ? 'c' : ''">12312</div>
        </div>
        <div @click="up1(1)">
            <router-link to="/home">1231</router-link>
            <router-link to="/home/about">1231</router-link>
        </div>
    </div>
    <div :class="2 == count ? 'k' : ''">
        <div @click="up(2)">
            <div :class="2 == a ? 'c' : ''">12312</div>
        </div>
        <div @click="up1(2)">
            <router-link to="/home">1231</router-link>
            <router-link to="/home/about">1231</router-link>
        </div>
    </div>
    <div :class="3 == count ? 'k' : ''">
        <div @click="up(3)">
            <div :class="3 == a ? 'c' : ''">12312</div>
        </div>
        <div @click="up1(3)">
            <router-link to="/home">1231</router-link>
            <router-link to="/home/about">1231</router-link>
        </div>
    </div>
</div>
Copy the code

// <script setup lang="ts">
// vue3 new experimental syntax
import { ref } from "vue";
let count = ref<number>(1);
const up = (e: number) = > e === count.value ? count.value = 0 : count.value = e
let a = ref<number>(1);
const up1 = (e: number) = > a.value = e
Copy the code

.sidebar {
  &: :-webkit-scrollbar {
    display: none;
  }

  display         : flex;
  flex-direction  : column;
  overflow-y      : auto;
  background-color: # 001529;
  color           : rgba(255.255.255.0.7);
  font-size       : 14px;

  a {
    text-decoration: none;
    color          : rgba(255.255.255.0.7);
  }

  // Drop down style toggle
  .k{>div {
      &:nth-child(2) {>a {
          height : 50px;
          opacity: 1; }}}}.c{
    color: #fff;
  }


  >div {
    &:first-child {
      height         : 50px;
      display        : flex;
      justify-content: flex-start;
      align-items    : center;
      margin-left    : 20px;
      font-size      : 20px;
      font-weight    : 700;
      color          : #fff;
    }

    >div {
      &:nth-child(1) {>a.div {
          &:hover {
            color: #fff;
          }

          padding-left: 20px; }}&:nth-child(2) {
        .router-link-exact-active {
          color           : #fff;
          background-color: #0960bd;
        }

        >div.a {
          transition      :.5s;
          height          : 0;
          opacity         : 0;
          background-color: #0c2135;
          padding-left    : 40px; }} >a.div {
        width      : 200px;
        display    : flex;
        height     : 50px;
        align-items: center; }}}}Copy the code

The code on

style

In the style area, the difficulty was probably the scrollbar, and I wasted a lot of time not being able to hide the scrollbar.

One line to solve the problem

-webkit-scrollbar {
    display: none;
}
Copy the code

CSS mostly uses nth-Child to find nodes, using class names only when style changes are required

The next pull has an animation effect, which is controlled by setting over time, transparency and height

From no height at the beginning, to add height at the end

.k{>div {
  &:nth-child(2) {>a {
      height : 50px;
      opacity: 1; }}}}Copy the code

Interactive part

Clicking on different locations and changing variables results in different effects. It seems impossible to write without JS