Регулировка позиционирования выпадающего меню subnav - PullRequest
Новая
       87

Регулировка позиционирования выпадающего меню subnav

0 голосов
/ 01 мая 2020

Новое здесь и немного новое для кодирования - я баловался, но это все. Прошло 6 лет с тех пор, как я в последний раз касался любой формы кода.

Я пытаюсь скопировать веб-сайт для практики, и у меня есть навигация и раскрывающийся субнап. Проблема, с которой я столкнулся, заключается в том, что я пытаюсь получить раскрывающийся список под навигацией go по ссылке, для которой он предназначен. Я приложу примеры и мой код. Любая помощь приветствуется. Пожалуйста, не стесняйтесь исправлять все, что вы считаете нужным - я только начал снова и предпочел бы знать правильный путь, чем продолжать любые плохие практики. Я также могу делать то, что я хочу, с помощью навигации, но это с левым и правым элементами с отрицательным px, что я не хочу делать.

Как это должно выглядеть :

Пример

Как я это понял : Пример 1

Пример 2

Я пытаюсь заставить стрелку связываться, как показано на рисунке. Кто-нибудь также знает, как изменить ширину этого правильно?

Мой html: 

 <!DOCTYPE html>
    <html lang="en">
        <head> 
             <meta charset="utf-8">
            <title>Arnold Clark &vert; New & Used Cars</title> 

            <link rel="stylesheet" type="text/css" href="style.css">


        </head> 
            <body>

                <div id="ac-header">
                        <a href="#"><img id="ac-logo" src="ac.png" alt="Arnold Clark logo" /></a>
                    <div id="nav">
                        <span>Find a car</span>
                            <div id="nav-Dropdown">
                                <p>
                                    <div style="font-weight: bold; font-size: 14px;">We sell</div>
                                </p>
                                <ul>
                                    <li><a href="#">Used cars</a></li>
                                    <li><a href="#">New cars</a></li>
                                    <li><a href="#">Nearly new cars</a></li>
                                    <li><a href="#">Car finance</a></li>
                                    <li><a href="#">Vans</a></li>
                                    <li><a href="#">Motability</a></li>
                                </ul>
                        </div>
                    </div>
                    <div id="nav">
                        <span class="pointer">Find a van</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Find a dealer</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Rental</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Servicing</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Other</span>
                            <div id="nav-Dropdown">
                                <ul>
                                    <div style="font-weight: bold;">
                                        <li>About Arnold Clark</li>
                                    </div>
                                </ul>
                            </div>
                    </div>
                </div>



                <div id="wrapper">

                    Content goes in here. 

                </div>
            </body>
    </html>

Мой CSS: 

    body {
    background-color: #fafafa;
    font-family: "Gotham A", "Gotham B", "Gotham", "Montserrat", Verdana, sans-serif;
    font-size: 14px;
    /* Removed the white space on either side of the container */
    margin: 0;
    padding: 0;
}


#wrapper { 
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 15px;
}

#ac-header {
    max-width: 100%;
    background-color: #2d3737;
    height: 63px;
    border-bottom: 6px solid #ffde00; 
    padding-top: 10px;
    padding-bottom: 10px;

}

#ac-logo {
    object-fit: contain; 
    width: 285px;
    height: 43px;
    padding-left: 41px;
    margin-top: 10px;
    position: absolute;
}

#nav {
    position: relative;
    display:  inline-block;
    bottom: 15px;
    left: 500px;
    top: 15px;
}

#nav > span {
    color: #fff;
    font-size: 15px;
    text-align: center;
    display: inline-block;
    padding: 8px 8px 8px 8px;
    margin-left: 30px;
    border-radius: 3px;
    cursor: pointer;
}

#nav > span:hover {
    color: #ffde00;
    background-color: #282e2e;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;


}

#nav > #nav-Dropdown {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 590px;
    top: 100px;
    padding: 12px 16px;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;
}

#nav > #nav-Dropdown > ul {
    list-style-type: none;
    padding: 0; 
    margin: 0;
    font-size: 14px;
}

#nav > #nav-Dropdown > ul > li {
    display: inline;
    padding: 10px;
    right: 10px;
}

#nav > #nav-Dropdown > ul > li > a {
    text-decoration: none;
    color: #000;

}

#nav:hover #nav-Dropdown {
    background-color: #fff;
    display: block;
    top: 50px;
}

Ответы [ 2 ]

0 голосов
/ 01 мая 2020

Итак, вам нужно иметь элемент li, у которого есть дочерний элемент, который заключает в себе ссылки для его 

var dropdown = document.querySelector('.dropdownParent');

dropdown.onclick = function() {
  var target = document.getElementById(this.dataset.droptarget)
  target.classList.toggle('active');
}
ul {
display: flex;
list-style: none;
justify-content: space-around;
}

.dropdown {
  position: relative;
}

.dropdown #dropdownOne {
  position: absolute;
  left: 0;
  top: 30px;
  display: none;
  opacity: 0;
  transition: all 1s;
}

.dropdown #dropdownOne.active {
  opacity: 1;
  display: block;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="dropdown">
    <a class="dropdownParent" href="#" data-droptarget="dropdownOne">Item 3</a>
    <div id="dropdownOne">
      <a href="#">Dropdown Item</a>
      <a href="#">Dropdown Item</a>
      <a href="#">Dropdown Item</a>
    </div>
  </li>
  <li>Item 4</li>
</ul>

раскрывающееся меню. Смотрите код.

0 голосов
/ 01 мая 2020

Я думаю, это то, что вы ищете. Вы хотите изменить значение top для ul, которое появляется, когда #nav равно :hover

Просто измените 50px на 58px, и оно должно быть выровнено так, как вы намерены. :) 

#nav:hover #nav-Dropdown {
    background-color: #fff;
    display: block;
    top: 58px;
}


body {
    background-color: #fafafa;
    font-family: "Gotham A", "Gotham B", "Gotham", "Montserrat", Verdana, sans-serif;
    font-size: 14px;
    /* Removed the white space on either side of the container */
    margin: 0;
    padding: 0;
}


#wrapper { 
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 15px;
}

#ac-header {
    max-width: 100%;
    background-color: #2d3737;
    height: 63px;
    border-bottom: 6px solid #ffde00; 
    padding-top: 10px;
    padding-bottom: 10px;

}

#ac-logo {
    object-fit: contain; 
    width: 285px;
    height: 43px;
    padding-left: 41px;
    margin-top: 10px;
    position: absolute;
}

#nav {
    position: relative;
    display:  inline-block;
    bottom: 15px;
    left: 500px;
    top: 15px;
}

#nav > span {
    color: #fff;
    font-size: 15px;
    text-align: center;
    display: inline-block;
    padding: 8px 8px 8px 8px;
    margin-left: 30px;
    border-radius: 3px;
    cursor: pointer;
}

#nav > span:hover {
    color: #ffde00;
    background-color: #282e2e;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;


}

#nav-Dropdown {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 590px;
    top: 100px;
    padding: 12px 16px;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;
}

#nav #nav-Dropdown ul {
    list-style-type: none;
    padding: 0; 
    font-size: 14px;
}

#nav > #nav-Dropdown > ul > li {
    display: inline;
    padding: 10px;
    right: 10px;
}

#nav > #nav-Dropdown > ul > li > a {
    text-decoration: none;
    color: #000;

}

#nav:hover #nav-Dropdown {
    background-color: #fff;
    display: block;
    top: 58px;
}
<div id="ac-header">
                        <a href="#"><img id="ac-logo" src="ac.png" alt="Arnold Clark logo" /></a>
                    <div id="nav">
                        <span>Find a car</span>
                            <div id="nav-Dropdown">
                                <p>
                                    <div style="font-weight: bold; font-size: 14px;">We sell</div>
                                </p>
                                <ul class="subDropdown">
                                    <li><a href="#">Used cars</a></li>
                                    <li><a href="#">New cars</a></li>
                                    <li><a href="#">Nearly new cars</a></li>
                                    <li><a href="#">Car finance</a></li>
                                    <li><a href="#">Vans</a></li>
                                    <li><a href="#">Motability</a></li>
                                </ul>
                        </div>
                    </div>
                    <div id="nav">
                        <span class="pointer">Find a van</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Find a dealer</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Rental</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Servicing</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Other</span>
                            <div id="nav-Dropdown">
                                <ul>
                                    <div style="font-weight: bold;">
                                        <li>About Arnold Clark</li>
                                    </div>
                                </ul>
                            </div>
                    </div>
                </div>



                <div id="wrapper">

                    Content goes in here. 

                </div>
...