как удалить заполнение оболочки в выпадающем списке?

ProgramBox

как удалить заполнение оболочки в выпадающем списке?

Post author:admin
Запись опубликована:31 октября, 2022
Post category:Вопросы по программированию

#html #css #drop-down-menu #navigation

#HTML #css #выпадающее меню #навигация

Вопрос:

Я хочу удалить заполнение размером 21,1 пикселя слева и справа от оболочки из выпадающего меню, но, что важно, ни другие методы, которые я пробовал, не работают. Заранее благодарю вас за предлагаемые вами решения. (Ситуация, о которой я сказал 1050 пикселей и ниже, должна быть исправлена.) Codepen: https://codepen.io/BerkayAkgurgen/pen/ExgWKJX

 const menuBtn = document.querySelector('.hamburger-menu');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if (!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
  }
});

 @media screen and (max-width: 1050px) {
  .hamburger-menu{
  cursor: pointer;
  transition: .6s;
  transition: all .5s ease-in-out;
  padding-right: 15px;
}

.line{
    position: relative;
    display: inline-block;
    width: 12px;
    height: 2px;
    background-color: white;
    transition: all .5s ease-in-out;
}

.line::before,
.line::after{
    position: absolute;
    content: '';
    width: 16px;
    height: 2px;
    background-color: white;
    box-shadow: 0 5px 2px -2px black;
    transition: all .5s ease-in-out;
}

.line::before{
    transform: translateY(6px);
}

.line::after{
    transform: translateY(-6px);
}

.hamburger-menu:hover{
    transform: translateY(-25%);
}

.hamburger-menu:hover .line:before{
    box-shadow: 0 5px 10px 1px black;
}


.hamburger-menu.open .line{
    transform: translateX(-50px);
    background: transparent;
    box-shadow: none;
  }
  
.hamburger-menu.open .line::before{
    transform: rotate(45deg) translate(35px, -35px);
  }
  
.hamburger-menu.open .line::after{
    transform: rotate(-45deg) translate(35px, 35px);
  }

  #site-header{
      padding: 0px;
  }
  
  .wrapper{
      position: absolute;
      background-color: rgb(142, 101, 192);
      top: 100%;
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      padding: 0px 21.1px;
  }

  .list{
      flex-direction:column;
      width: 100%;
  }

  .list .list-item{
      padding: 14.1px 21.1px;
      width: 100%;
    background-color: rgb(142, 101, 192);
  }

  .list-item i{
    top: 16.5px;
    left: 92px;
}

  .account-menu{
      flex-direction: column;
      width: 100%;
  }

  .account-menu .account-item{
      padding: 14.1px 0px;
      width: 100%;
  }

  .account-menu .theme{
      display: block;
      margin: 37.5px 0px;
      padding: 19px 15.6px;
      text-align: center;
      background-color: white;
      transition: .4s;
  }

  .theme:hover{
    transform: scale(1.05);
    background-color: white;
    border: none;
    box-shadow: 0 4px 15px 1px;
  }

  .theme .item-paragraph{
      padding: 0px 12px;
      color: rgb(42, 33, 54);
      font-size: 20px;
  }

  .dropdown{
      width: 100%;
      padding: 0px !important;
      background-color: rgba(0, 0, 0, 0.2);
  }
}

@media screen and (min-width: 1051px) {
  .dropdown{
    position: absolute;
    opacity: 0;
    background-color: white;
    top: 37px;
    min-width: 231px;
    padding: 12px 0px;
    border-radius: 4px;
    transition: all .9s ease;
}
.item-4:hover .dropdown{
    opacity: 1;
    transform: translateY(0);
   }

.dropdown .dropdown-item{
    position: relative;
    padding: .7em;
}

.dropdown .dropdown-item:hover{
    background-color: hsl(0, 0%, 93%);
}

.dropdown .dropdown-item .dropdown-header{
 display: inline-block;
 color: black;
 margin-bottom: 5px;
 font-size: 20.5px;
 font-weight: 600;
}

.dropdown .dropdown-item .dropdown-span{
    display: block;
    color: #665c73;
    font-size: 13.8px;
    font-weight: 400;
    font-weight: normal;
}


.account-menu .theme:hover{
    background-color: white;
    border: none;
    transform: scaleY(1.08); 
    box-shadow: 0 5px 2px -2px var(--text-color-nav);
    transform: translateY(-10%);
}

.account-menu .theme:hover a{
    color: var(--text-color-body);
}

.account-menu .theme a{
    padding: 0px 14px;
    font-size: 20px;
    font-weight: 700;
}

.theme:hover a{
    display: inline-block;
    animation: shake 1s;
  }

  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

  .dropdown-item > a > .dropdown-header::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: black;
    transition: width .3s;
}

.dropdown-item:hover a > .dropdown-header::after {
    width: 100%;
    transition: width .3s;
}


.list-item > a::after {
    position: absolute;
    bottom: -6px;
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fac919;;
    transition: width .3s;
}

.list-item > a:hover::after {
    width: 100%;
    transition: width .3s;
}

.list-item > a::after {
    position: absolute;
    bottom: -6px;
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fac919;;
    transition: width .3s;
}

.list-item > a:hover::after {
    width: 100%;
    transition: width .3s;
}

.account-menu .log-in > a::after {
    position: absolute;
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fac919;;
    transition: width .3s;
}

.account-menu .log-in > a:hover::after {
    width: 16%;
    transition: width .3s;
}
}

*,
*::before,
*::after{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

:root {
   --bg-color: rgba(142, 101, 192); 
   --color-light: rgb(255, 255, 255);
   --btn-text-color: rgb(0, 202, 182);
   --text-color-body: rgb(47, 47, 47);
   --text-color-nav:rgb(42, 33, 54);
   --hover-color: #fac919;
}

/*
 Adelle
 font-family: 'Varta', sans-serif; 
 */

body{
    font-family: 'Roboto', sans-serif;
}

ul{
  list-style: none;
}

a{
  text-decoration: none;
  color: black;
}

#site-header{
    position: sticky;
    top: 0px;
    z-index: 999;
    width: 100%;
    background-color: var(--bg-color);
    padding: 0px 48px;
}

#site-header::before{
    position: absolute;
    content: '';
    width: 50%;
    right: 0px;
    top: 0px;
    height: 100%;
    background-image: url(./img/nokta6.png);
    background-position: center;
    background-size: cover;
}

#top-bar{
    max-width: 1240px;
    margin: 0px auto;
}

.flex-wrapper{
    position: relative;
    height: 91px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wrapper{
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 75%;
    margin-left: auto;
    height: 100%;
}

.brand-logo{
    display: flex;
    align-items: center;
    min-height: 100%;
}

.nav-list{
    display: flex;
    height: 100%;
}

.nav-list .list{
    display: flex;
    align-items: center;
}

.list-item{
    position: relative;
    margin: 0px 12px;
}

.list-item a{
    display: inline-block;
    color: white;
    font-size: 18px;
    font-weight: 600px;
    font-weight: bolder;
}

.item-4 a:hover i{
    opacity: 1;
}

.list-item i{
    position: absolute;
    opacity: .6;
    top: 2px;
    left: 92px;
}

.account{
    position: relative;
    display: flex;
    min-height: 100%;
}

.account .account-menu{
    display: flex;
    align-items: center;
}

.account-menu a{
    display: inline-block;
    color: white;
    font-size: 18px;
    font-weight: 600px;
    font-weight: bolder;
}

.account-menu .theme{
    background-color: var(--bg-color);
    border: 0.12em solid white;
    border-radius: 4px;
    padding: 0.6em 1.1em 0.7em;
    cursor: pointer;
    transition: transform .3s;
}

.account-menu .log-in{
    padding: 0px 12px;
}

 <!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Pixel Grade</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' href='main.css'>
    <link rel="stylesheet" media="(min-width:1051px)" href="desktop.css"/>
    <link rel="stylesheet" media="(max-width:1050px)" href="mobile.css"/>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512- 4zCK9k qNFUR5X cKL9EIR ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900amp;family=Varta:wght@300;400;500;600;700amp;display=swap" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css2?family=Varta:wght@300;400;500;600;700amp;display=swap" rel="stylesheet"> 
</head>
<body>
 <header id="site-header">
     <nav id="top-bar">
     <div class="flex-wrapper">
     <div class="brand-logo">
         <img src="./img/logo2.png" alt="Logo" width="190px" style="cursor: pointer;">
     </div>
     <div class="wrapper">
     <div class="nav-list">
         <ul class="list">
             <li class="list-item item-1"><a href="#" class="item-paragraph">Themes</a></li>
             <li class="list-item item-2"><a href="#" class="item-paragraph">About</a></li>
             <li class="list-item item-3"><a href="#" class="item-paragraph">Testimonials</a></li>
             <li class="list-item item-4"><a href="#" class="item-paragraph">Resources <span> <i class="fas fa-chevron-down"></i> </span></a>
            <ul class="dropdown">
                <li class="dropdown-item"><a href="#">
                    <h2 class="dropdown-header">Upstairs</h1>
                        <span class="dropdown-span">
                            Stories and lessons packed into flavored articles
                        </span>
                </a></li>
                <li class="dropdown-item"><a href="#" class="item-paragraph">
                    <h2 class="dropdown-header">Free eBooks</h1>
                        <span class="dropdown-span">
                            In-depth guides to apply on your terms
                        </span>
                </a></li>
                <li class="dropdown-item"><a href="#" class="item-paragraph">
                    <h2 class="dropdown-header">Help Center</h1>
                        <span class="dropdown-span">
                            Nitty-gritty instructions about our products
                        </span>
                </a></li>
                <li class="dropdown-item"><a href="#" class="item-paragraph">
                    <h2 class="dropdown-header">Contact Us</h1>
                        <span class="dropdown-span">
                            The door is open, please enter
                        </span>
                </a></li>
            </ul>
            </li>
         </ul>
     </div>
    <div class="account">
        <ul class="account-menu">
            <li class="account-item log-in"><a href="#" class="item-paragraph">Log in</a></li>
            <li class="account-item theme"><a href="#" class="item-paragraph"><span class="shake-letter">Ch</span>oose The Theme</a></li>
        </ul>
    </div>
</div>
    <div class="hamburger-menu">
        <span class="line"></span>
    </div>
</div>
     </nav>
 </header>



 <script src="api.js"></script>
</body>
</html>

Развернуть фрагмент

Ответ №1:

найдите следующий код в своем css, соответствующим образом отрегулируйте отступы, вы можете удалить отступы css влево вправо, используя «padding: .7rem 0;»

 .dropdown .dropdown-item{
position: relative;
padding: .7em;
}

Ответ №2:

измените строку кода css:

     padding: .7em;

Для

 padding: .7em 0 .7em 0

Если я вас правильно понял…

1. Я хочу hizliresim.com/ojTm0P чтобы охватить все поля по этой ссылке. То, что ты сказал, не работает.

2. не очень хорошо вас понял. Что вы имеете в виду?

3. Я хочу, чтобы цвет фона всплывающего окна покрывал его области заливкой, которую я рисую.