Нужны советы по центру выпадающего навигационного бара для проекта колледжа - PullRequest
Новая
       3

Нужны советы по центру выпадающего навигационного бара для проекта колледжа

2 голосов
/ 03 марта 2020

В настоящее время я работаю над проектом для колледжа, и моя навигационная панель дает мне проблемы, я пробовал различные способы решить проблему, проводя некоторые исследования. Сайт очень простой c, так как на данный момент это всего лишь шаблон. Моя главная цель для панели навигации состояла в том, чтобы центрировать ее на основном фоновом изображении и позволить раскрывающейся вкладке «Комнаты». 

nav {

    background-color: transparent;

}

nav a {
    color: #F2E2C4;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    text-decoration: none;
    position: relative;
    font-family: 'Spartan';
}

nav ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

nav a.beachview {
    float: left;
    color: #F2E2C4;
    text-align: center;
    padding: 0px 16px;
    text-decoration: none;
    font-size: 45px;
    padding-top: 2px;
    font-family: 'Spartan';
}

nav a:hover {
    background-color: none;
    color: #8C8474;
}

nav ul ul {
    display: none;
    position: absolute;
}

nav ul li:hover ul {
    display: inline-block;
}

nav ul ul li {
    float: none;
}

nav li {
    float: left;
}
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>Beachview - Home</title>
    <meta name="author" content="Your Name">
    <meta name="description" content="Example description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="" />
    <link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Spartan&display=swap" rel="stylesheet">
</head>

<body>
    <div class="bg-img">
        <div class="container">
            <nav>
                <ul>
                    <li><a href="#">ROOMS</a>
                        <ul>
                            <li><a href="#">GLASGOW</a></li>
                            <li><a href="#">EDINBURGH</a></li>
                            <li><a href="#">ABERDEEN</a></li>
                            <li><a href="#">DUNDEE</a></li>
                        </ul>
                    </li>
                    <li><a href="#">GALLERY</a></li>
                    <li><a class="beachview" href="#">BEACHVIEW</a></li>
                    <li><a href="#">LOCAL</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <main>Main stuff goes here</main>
</body>

</html>

Не уверен на 100%, имеет ли это смысл, поскольку фоновое изображение не загружается.

1 Ответ

1 голос
/ 03 марта 2020
  1. Добавьте класс .dropdown к вашему li, содержащий раскрывающийся список ul. 
<li class="dropdown"><a href="#">ROOMS</a>
  <ul>...</ul>
</li>
Добавьте эти стили, чтобы выровнять раскрывающийся список под ссылкой "Комнаты": 
.dropdown {
  /* Make it so you can position the child ul with absolute position 
  / relative to this parent */
  position:relative; 
}
.dropdown ul {
  position:absolute;
  left:0;
  top:2.5em;
}
Примените display: flex к вашему .bg-img контейнеру, а затем добавьте margin: auto; к дочернему элементу nav, чтобы отцентрировать его по вертикали и горизонтали. 
.bg-img {
  background-image: url('https://via.placeholder.com/900x200/000/333'); // Replace with your image
  height: 200px; // Sample height
  width: 100%;   // Sample width
  display: flex; // Flex allows for easy centering of child-elements
}

nav {
  background-color: transparent;
  margin:auto; // this is the key to the centered alignment
}

Я также переместился ваш class="container" из div-оболочки для вашей навигации и удалил этот div.

Вот полный рабочий код. (Нажмите «Выполнить фрагмент кода», затем нажмите «Полная страница» с правой стороны, чтобы увидеть, как оно работает): 

.bg-img {                            
  /* Replace this img url with your image */
  background-image: url('https://via.placeholder.com/900x200/000/333'); 
  height: 200px; /* Sample height */
  width: 100%;   /* Sample width */
  display: flex; /* Flex allows for easy centering of child-elements with margin:auto */
}

nav {
  background-color: transparent;
  margin:auto;
}
.dropdown {
  /* Make it so you can position the child ul with absolute position 
     relative to this parent */
  position:relative; 
}
.dropdown ul {
  position:absolute;
  left:0;
  top:2.5em;
}

/* None of the below code was modified */
nav a {
    color: #F2E2C4;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    text-decoration: none;
    position: relative;
    font-family: 'Spartan';
}

nav ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

nav a.beachview {
    float: left;
    color: #F2E2C4;
    text-align: center;
    padding: 0px 16px;
    text-decoration: none;
    font-size: 45px;
    padding-top: 2px;
    font-family: 'Spartan';
}

nav a:hover {
    background-color: none;
    color: #8C8474;
}

nav ul ul {
    display: none;
    position: absolute;
}

nav ul li:hover ul {
    display: inline-block;
}

nav ul ul li {
    float: none;
}

nav li {
    float: left;
}
<body>
  <div class="bg-img">
    <!-- this is where the old <div class="container"> was -->
    <nav class="container">
      <ul>
        <li class="dropdown"><a href="#">ROOMS</a>
          <ul>
            <li><a href="#">GLASGOW</a></li>
            <li><a href="#">EDINBURGH</a></li>
            <li><a href="#">ABERDEEN</a></li>
            <li><a href="#">DUNDEE</a></li>
          </ul>
        </li>
        <li><a href="#">GALLERY</a></li>
        <li><a class="beachview" href="#">BEACHVIEW</a></li>
        <li><a href="#">LOCAL</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
  </div>
  <main>Main stuff goes here</main>
</body>
...