Блог

Главная - Вопросы по программированию - Объединение панели значков с выпадающим списком в HTML?

Объединение панели значков с выпадающим списком в HTML?

#html

Вопрос:

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

Ответ №1:

Ну, для того, чтобы сделать то, что вы описываете, у вас есть 2 варианта. Первый вариант-сделать несколько трюков с CSS. Есть такая вещь, называемая «взломом флажков», но она совсем не проста для новичка. Второй вариант более прост и включает JavaScript.

Я вставлю свой код сюда, чтобы вы могли видеть, что я сделал.

 const projectsTab = document.getElementById('projects')
const tabName = projectsTab.querySelector('.tab-name')
const projectLinks = document.querySelector('.project-links')

projectsTab.addEventListener('click', e => {
  const isOpen = projectLinks.classList.contains('open')

  if (isOpen) projectLinks.classList.remove('open')
  else projectLinks.classList.add('open')
})

// link event listeners
const links = [...projectLinks.children] // turn this into an array

links.forEach(link => link.addEventListener('click', e => {
  tabName.innerText = link.innerText
})) 
 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

nav {
  position: fixed;
  width: 100%;
  height: 50px;
  background: #222;
  top: 0;
  left: 0;
  color: white;
  display: flex;
}

nav>* {
  flex: 1;
}

#logo {
  padding-left: 20px;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

nav ul {
  display: flex;
  list-style: none;
  height: 100%;
}

nav ul li {
  position: relative;
  flex: 1;
  background: #222;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.2s;
}

nav ul li:hover {
  background: #555;
}

.project-links {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  top: 100%;
  width: 100%;
  background-color: white;
  color: black;
  /* This is the height of this div   height of the nav bar */
  transform: translateY(-135%);
  transition: 0.2s;
  z-index: -1;
}

.project-links.open {
  transform: translateY(0);
}

.project-link {
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  text-decoration: none;
  color: white;
  cursor: pointer;
  transition: 0.2s;
  background: #222;
  color: white;
}

.project-link:hover {
  background: #555;
} 
 <nav>
  <div id="logo">Logo</div>
  <ul>
    <li>About</li>
    <li id="projects">
      <span class="tab-name">Projects</span>
      <div class="project-links">
        <a class="project-link" href="#">Link 1</a>
        <a class="project-link" href="#">Link 2</a>
        <a class="project-link" href="#">Link 3</a>
      </div>
    </li>
    <li>Contact</li>
  </ul>
</nav>

Нажмите на Projects вкладку, чтобы увидеть этот код в действии. Кстати, я знаю, что здесь нет «значков», но это не имеет значения. Вы можете заменить любой текст любыми значками, которые захотите.

Комментарии:

1. Да, это точно отвечает на мой вопрос. Большое спасибо О:)

2. Нет проблем. :))

3. Прежде чем я опубликую новый вопрос, можно ли настроить код так, чтобы, если я скажу, выберите ссылку 2 из выпадающего меню, а затем вместо «Проекты» скажите «Ссылка 2»? Моя долгосрочная цель состоит в том, чтобы пользователи выбирали настройки из этой панели

4. А, ладно, конечно. Без проблем

5. Большое вам спасибо

Метки: