Menú vertical flotante

1,929 ledoc

Abrir en el editor Publica tu código

Recomendado

10 July 2025

Plantilla de menú de restaurante HTML

22 May 2025

flotante infinito

11 May 2024

Tarjeta flotante Ethereum

HTML

#v-menu ul {
    list-style: none;
    text-indent: 0px;
    padding: 0;
    margin: 0;
  }

#v-menu li {
    margin-top: 0px;
    border-bottom: 1px solid #414141;
  }

#v-menu a {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
    padding: 9px 50px;
    color: #CCC;
    display: block;
    height: 26px;
    line-height: 26px;
    text-decoration: none;
    background: #333;
    background-size: 200% 200%;
    text-shadow: 1px 1px 1px #111;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

#v-menu a:hover {
    background: linear-gradient(90deg, #ff7f50, #ff6347, #ffa07a, #f08080, #e9967a);
    background-size: 400% 400%;
    animation: gradientBG 2s infinite;
    color: #fff;
    box-shadow: 0px 0px 10px rgba(255, 99, 71, 0.8), 0px 0px 15px rgba(255, 99, 71, 0.8);
    transform: scale(1.05);
    border-radius: 4px;
  }

@keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }

50% {
      background-position: 100% 50%;
    }

100% {
      background-position: 0% 50%;
    }
  }

#v-menu a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: skewX(-45deg);
    transition: 0.5s;
  }

#v-menu a:hover::before {
    left: 100%;
  }
</style>

CSS