时间戳

首页 > 解决方案 > 在移动菜单上显示链接标题

html - 在移动菜单上显示链接标题

问题描述

我想在导航栏中使用图标而不是文本，但在悬停时显示标题。“标题”文本在移动版和普通版上都能正常显示。但是在移动显示上，我想在不悬停的情况下自动在图标旁边显示标题文本。当我将鼠标悬停在菜单项上时，下面的代码显示了图标（标题）。但我希望在移动设备上打开汉堡菜单时显示标题而不悬停。

<nav class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="/index.shtml"><img src="images/cardinal.png" width="80" alt=""/></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent1">
        <ul class="navbar-nav ml-auto">  
          <li class="nav-item"> <a href="index.shtml" class="nav-link text-white" title="Home"><i class="fas fa-home"></i></a> </li>    
          <li class="nav-item"> <a class="nav-link text-white" href="memberinfo.html" title="Members"><i class="fas fa-user-friends"></i></a> </li>
          <li class="nav-item"> <a class="nav-link text-white" href="faq.shtml" title="FAQ"><i class="far fa-question-circle"></i></a> </li>
          <li class="nav-item"> <a class="nav-link text-white" href="contacts.shtml" title="Contact Us"><i class="far fa-envelope"></i></a> </li>
        </ul>

      </div>
  </nav>

标签： htmlcssbootstrap-4

解决方案

使用伪元素来显示title属性。控制何时应使用媒体查询显示。

@media (max-width: 768px) {
  .nav-link::after {
    content: attr(title);
  }
}

例子：

.navbar-dark {
  background: hotpink;
}

.fas,
.far {
  display: inline-block;
  width: 20px;
  height: 20px;
  outline: 1px solid white;
}

@media (max-width: 768px) {
  .nav-link::after {
    content: attr(title);
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href="/index.shtml"><img src="images/cardinal.png" width="80" alt="" /></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent1">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item"> <a href="index.shtml" class="nav-link text-white" title="Home"><i class="fas fa-home"></i></a> </li>
      <li class="nav-item"> <a class="nav-link text-white" href="memberinfo.html" title="Members"><i class="fas fa-user-friends"></i></a> </li>
      <li class="nav-item"> <a class="nav-link text-white" href="faq.shtml" title="FAQ"><i class="far fa-question-circle"></i></a> </li>
      <li class="nav-item"> <a class="nav-link text-white" href="contacts.shtml" title="Contact Us"><i class="far fa-envelope"></i></a> </li>
    </ul>

  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

推荐阅读