Выпадающая навигация CSS выравнивание вправо - PullRequest
Новая
       18

Выпадающая навигация CSS выравнивание вправо

2 голосов
/ 07 марта 2019

Я только начал изучать HTML и CSS, я пытаюсь создать раскрывающуюся навигацию, где край раскрывающегося списка выровнен по правой стороне с элементом навигации для этого раскрывающегося списка.Все работает отлично, кроме выравнивания.

Я переместил выпадающий список, чтобы попасть под элемент навигации «Домой», чтобы я мог видеть выравнивание.Я также видел некоторые страницы, которые предлагают использовать right:0 и left:auto, и я пытался разместить это во многих местах, он либо ничего не делает, либо перемещает все меню к правому краю браузера.

Вот jsfiddle: https://jsfiddle.net/StePeters17/qm4Lkevs/36/

1 Ответ

0 голосов
/ 07 марта 2019

Вы можете установить расстояние справа, используя right: #px, и вам не нужно будет включать left: auto. Просто замените # на количество пикселей, которое вам нужно. Вы включили огромное количество кода, поэтому я просто расскажу вам, что я добавил, чтобы исправить проблему, и вы можете запустить фрагмент кода, чтобы увидеть, как он работает.

Если вы добавите right: 220px к классу .dropdown-content, это выровняет его по правому краю. Текст будет по-прежнему выровнен по левому краю, но вы можете изменить это, добавив text-align: right к тому же классу, если вы также хотите, чтобы этот текст был выровнен по правому краю. Вы хотите добавить его в этот класс, потому что это контейнер для всего выпадающего содержимого. 

* {
  /*global settings */
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

body {
  background-color: whitesmoke;
  padding-top: 70px;
  padding-left: 20px;
}

/* ---------------------------------------------------------------- Navigation bar styling------------------------------------------------------------------------*/

/*------------- Main Nav Bar-------------- */

.nav-main {
  background-color: #333333;
  color: white;
  font-size: 18px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
  /*Set the height so that it doesn't auto change and fill screen when dropdown opens*/
  line-height: 36px;
  /* 36 (line height) + 4 (border-bottom) + 2*10 (padding top & bottom) = 60 (height of nav)
}
.nav-main .logo{
	/* insert logo stlying e.g. float left, height etc. */
}

.nav-main ul {
  float: right;
  /*Float the list itself to the right of the header */
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav-main ul li {
  float: left;
  /* Float the list items (menu items) left within the list which is floated on the right */
}
.nav-main ul li a {
  right:0;
}

#nav-active {
  border-bottom: 4px solid red;
}

.nav-item {
  /* This is the header item links, i.e. the top items which produce dropdowns */
  display: inline-block;
  padding: 10px;
  color: white;
  text-decoration: none;
}

.nav-item:hover {
  background-color: dimgrey;
  border-bottom: 4px solid red;
}

/*Next 2 statements will hide and unhide the dropdown on hover of nav item*/
.nav-item:hover ~.dropdown-content{
  max-height:400px;
  -webkit-transition:max-height 0.25s ease-in;
  -moz-transition:max-height 0.25s ease-in;
  transition:max-height 0.25s ease-in;
}
.dropdown-content:hover {
  max-height:400px;
}

/*------------- Dropdown styling-------------- */

.dropdown-content {
  position: absolute;
  top: 60px;
  /*This is the height of the header */
  overflow: hidden;
  background-color: #333333;
  color: white;
  font-size: 16px;
  max-height:0;
  right: 220px;
}

.dropdown-content ul {
  margin: 0;
  padding: 0;
}

.dropdown-content a {
  color: white;
  text-decoration: none;
}

.dropdown-sub {
  /* This is where we can add things like padding without messing things up */
  padding: 0;
  margin: 0;
}

.dropdown-sub ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.dropdown-sub ul li {
  float: none;
}

.dropdown-sub ul li a {
  width: 100%;
  white-space:nowrap;
  border-bottom: 4px solid transparent;
  display: inline-block;
  padding: 3px 10px;
  /* 5px padding top&bottom, 10 on l&r */
}

.dropdown-sub ul li a:hover {
  background-color: dimgrey;
  border-bottom: 4px solid red;
}

/* ---------------------------------------------------------------- End of navigation bar styling----------------------------------------------------------------*/
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="description" content="This is a meta description, this is what often shows up under the search results">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Link to stylesheet -->
    <link rel="stylesheet" href="Stylesheet2.css">
    <!-- Add Roboto font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
    <!-- Add icon library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.css">
  </head>

  <body>
    <!-- This is the top part to all the page docs -->
    <!-- Need to add the header code that appears in all docs -->

    <header>
      <!-- Navigation Bar -->

      <nav class="nav-main">
        <!--This the container for the header -->
        <div class="logo">
          <!-- Insert logo in this container then use css to style, e.g. float left -->
        </div>
        <ul>
          <!-- This is the list of nav headers -->
          <li>
            <!-- This is the actual item for the nav header-->
            <a href="#" class="nav-item" id="nav-active">Home</a>
            <!-- This is the header item link -->
<div class="dropdown-content">
              <!-- Create a couple of divs for the dropdown content... placed at same level as the nav-item itself-->
              <div class="dropdown-sub">
                <ul>
                  <!-- Dropdown list -->
                  <li><a href="#">User Profile</a></li>
                  <li><a href="#">Settings</a></li>
                  <li><a href="#">Log out</a></li>
                </ul>
              </div>
            </div>
          </li>
          <li><a href="#" class="nav-item">About</a></li>
          <!-- Can sit on one line if no dropdown-->
          <li><a href="#" class="nav-item">News</a></li>
          <li>
            <a href="#" class="nav-item">Account</a>
            
          </li>
        </ul>

      </nav>

    </header>

    <!-- Since this gets called using php into all page docs, we don't close the <body> and <html> tags here-->
    <!-- Close the <body> and <html> tags in the footer document, which gets called at the end of each page doc -->

    <p>Top Line</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>


  </body>

</html>
...