Как добавить гиперссылку на основной заголовок выпадающего меню? - PullRequest
Новая
       18

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

0 голосов
/ 15 февраля 2019

Я работаю над созданием выпадающих меню для моих списков eBay.Я дошел до того, что мне нравится функциональность моих меню, но я хочу усовершенствовать их.В настоящее время у меня есть выпадающие меню.При наведении курсора на меню из меню отображается раскрывающийся список, и каждый заголовок связан с соответствующей страницей.Я хочу добавить гиперссылку на сам заголовок.Например, если я наведу курсор на заголовок меню, появится раскрывающийся список.То, что я хотел бы сделать, - это нажать на заголовок меню и заставить его перейти на определенную веб-страницу.

У меня нет большого опыта программирования CSS.Я успешно создал меню, изучив его на w3schools.com.Я не нашел способ сделать это, и мне не повезло, исследуя это.

<style>
.dropbtn {
  background-color: #21205F;
  color: white;
  width: 130px;
  padding: 10px;
  font-size: 1.325em;
  font-family: "Times New Roman", Times, serif;
  margin: 2px;
  border: none;
  cursor: pointer;
  border-radius: 10px;
}

.dropdown {
  float: left;
  display: inline-block;
}

.dropdown-content {
  border-radius: 10px;
  display: none;
  position: absolute;
  background-color: #21205F;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  border-radius: 10px;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #66BD29}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #66BD29;
}
</style>



<div class="dropdown">
  <button class="dropbtn">Menu Title</button>
  <div class="dropdown-content">
  <a href="My Link 1">Link 1 Title</a>
  <a href="My Link 2">Link 2 Title</a>
  <a href="My Link 3">Link 3 Title</a>
  </div>
</div>

Я надеюсь добавить ссылку href в заголовок меню.При нажатии на заголовок меню, я надеюсь, что это может привести пользователя к конкретной ссылке.Я надеюсь, что смогу сделать это с помощью предоставленного кода, но, возможно, это потребует полной реконструкции того, как я программирую эти меню.В настоящее время я использую .dropbtn с .dropdown и .dropdown-content с w3schools.com.

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

Вы можете просто добавить тег A внутри своей кнопки.

HTML: 

<button class="dropbtn">
    <a href="#"> <!––added-->
        Menu Title
    </a>
</button>

CSS: 

.dropbtn>a { /*added*/
    text-decoration: none;
    color: inherit;
}
0 голосов
/ 15 февраля 2019

Вам просто нужно заменить тег кнопки на тег А. 

<div class="dropdown">
  <a href="My Top Link" class="dropbtn">Menu Title</a>
  <div class="dropdown-content">
  <a href="My Link 1">Link 1 Title</a>
  <a href="My Link 2">Link 2 Title</a>
  <a href="My Link 3">Link 3 Title</a>
  </div>
</div>
...