Сделать ссылку кликабельной, но также есть раскрывающийся список? - PullRequest
Новая
       12

Сделать ссылку кликабельной, но также есть раскрывающийся список?

0 голосов
/ 15 мая 2019

У меня есть панель навигации, где у меня есть «nav-item» с функцией выпадающего меню.

Но то, что я хочу, это «button / nav-item», который виден в navb-панель, на которую можно нажимать, и перенаправить на другую страницу, а затем стрелка вниз должна быть справа, где вы можете нажать на стрелку и затем получить раскрывающееся меню.

У меня есть два подхода:

1. 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Navbar Toggle -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
  <!-- Navbar Toggle END -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <!-- Navbar Items Links-->
    <ul class="navbar-nav">
      <!-- Home -->
      <li class="nav-item">
        <a class="nav-link" href="../Startseite/Index.jsp">Home <i class="fas fa-home"></i></a>
      </li>
      <!-- Gruppen Dropdown-->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#gruppen" id="navbardrop1" data-toggle="dropdown">Gruppen <i class="fas fa-users"></i></a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#gruppe1">Gruppe 1</a>
          <a class="dropdown-item" href="#gruppe2">Gruppe 2</a>
          <a class="dropdown-item" href="#gruppe3">Gruppe 3</a>
        </div>
      </li>
      <!-- Zahlungen -->
      <li class="nav-item"><a class="nav-link" href="../Zahlungsuebersicht/Zahlungsuebersicht.jsp">Zahlungen
                <i class="fas fa-receipt"></i>
            </a></li>
    </ul>
    <!-- Navbar Items Rechts-->
    <ul class="navbar-nav ml-auto">
      <!-- Profil -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#asd" id="navbardrop2" data-toggle="dropdown">Benutzer <i class="fas fa-user"></i></a>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#asd">Profil bearbeiten <i
                            class="fas fa-user-edit"></i>
                    </a> <a class="dropdown-item" href="#asd">Abmelden <i class="fas fa-sign-in-alt"></i>
                </a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="../Registrieren/Registrieren.jsp">Registrieren <i class="fas fa-sign-in-alt"></i></a>
      </li>
    </ul>
    <!-- Navbar Items END -->
  </div>
</nav>

Это из дизайна, который я ищу, но мне бы хотелось, чтобы элемент "Gruppen" активировался, поэтому он перенаправляет вас на другую страницу.

2 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Navbar Toggle -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
  <!-- Navbar Toggle END -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <!-- Navbar Items Links-->
    <ul class="navbar-nav">
      <!-- Home -->
      <li class="nav-item">
        <a class="nav-link" href="../Startseite/Index.jsp">Home <i class="fas fa-home"></i></a>
      </li>
      <!-- Gruppen Dropdown-->
      <li class="nav-item">
        <a class="nav-link" href="#gruppen">Gruppen <i class="fas fa-home"></i></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown"></a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#gruppe1">Gruppe 1</a>
          <a class="dropdown-item" href="#gruppe2">Gruppe 2</a>
          <a class="dropdown-item" href="#gruppe3">Gruppe 3</a>
        </div>
      </li>
      <!-- Zahlungen -->
      <li class="nav-item"><a class="nav-link" href="../Zahlungsuebersicht/Zahlungsuebersicht.jsp">Zahlungen
                <i class="fas fa-receipt"></i>
            </a></li>
    </ul>
    <!-- Navbar Items Rechts-->
    <ul class="navbar-nav ml-auto">
      <!-- Profil -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#asd" id="navbardrop2" data-toggle="dropdown">Benutzer <i class="fas fa-user"></i></a>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#asd">Profil bearbeiten <i
                            class="fas fa-user-edit"></i>
                    </a> <a class="dropdown-item" href="#asd">Abmelden <i class="fas fa-sign-in-alt"></i>
                </a>
        </div>
      </li>
      <!-- /c:if -->
      <li class="nav-item">
        <a class="nav-link active" href="../Registrieren/Registrieren.jsp">Registrieren <i class="fas fa-sign-in-alt"></i></a>
      </li>
    </ul>
    <!-- Navbar Items END -->
  </div>
</nav>

На мой взгляд, это одно решение действительно грязное.

Нет ли чистого способа найти правильное решение?Я довольно плохо знаком со всеми HTML, Bootstrap и CSS.

EDIT: Я понятия не имею, почему, но я выполнил два абсолютно одинаковых фрагмента кода на моем локальном сервере, ирезультат был другим ... Я хочу, чтобы второй подход понравился, но без стрелки, являющейся навигационным элементом, но когда я это делаю, стрелка выпадающего меню находится вверху панели навигации, как и над всем текстом.есть ли способ это исправить?

1 Ответ

1 голос
/ 15 мая 2019

Ваша текущая структура кода упрощена: 

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">
  Gruppen <i class="fas fa-users"></i>
  </a>
    <div class="dropdown-menu">
      ...
    </div>
</li>

Как я понял - цель состоит в том, чтобы сделать <i class="fas fa-users"></i> отдельной выпадающей ссылкой, и стиль не должен ухудшаться.

Это решит вашу проблему: 

<li class="nav-item dropdown nav-link">
  <a href="/#yourlink">
  Gruppen 
  </a>
  <a class="dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">
  <i class="fas fa-users"></i>
  </a>
    <div class="dropdown-menu">
      ...
    </div>
</li>

Хитрость в классе nav-link, который обеспечивает правильное позиционирование вашего элемента меню. Перемещение этого элемента <li> могло бы вызвать некоторые конфликты в стилях, если CSS был более сложным, поэтому будьте осторожны с перемещением класса из одного элемента в другой в будущем.

Примечание : вы должны понимать, что выпадающее меню не должно быть сделано так, как вы хотите, потому что при взаимодействии с ним средний пользователь ожидает выпадающее меню после щелчка, а не перенаправление на какую-либо внешнюю страницу .

...