Как я могу сделать подменю появляется с помощью jquery? - PullRequest
Новая
       2

Как я могу сделать подменю появляется с помощью jquery?

0 голосов
/ 12 сентября 2018

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

<style>
.menu {
  margin-left: 220px;
}
.menu-item-text {
  display: inline-block;
  margin-top: 18px;
  color: black;
  font-weight: 550;
}
.menu-item-text:hover {
  content: '';
  color: red;
}
.menu-item-text:hover:after {
  content:'';
  display: block;
  border-bottom: 2px solid rgb(15, 1, 1);
  margin-top: 19px;
}
.sub-menu1 {
  background: yellowgreen;
  position: absolute;
  display: block;
}
.sub-menu li {
  white-space: nowrap;
  display: inline;
}
.sub-menu a:before {
  content: '☆';
  top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
  content: '★';
} 
.navigation .sub-menu {
  display: none;
}
.menu-act .menu-item-text  {
  color: red;
}
.sub-menu1 li, .sub-menu1 a {
  display: inline-block;
}
</style>
<body>
    <nav class="navigation">
        <ul class="menu">
          <li class='menu-item' tabindex='0'>
             <span class="menu-item-text menu-act">About HTML</span>
            <ul class='sub-menu'>
                <li>
                 <a href="#">HTML Introduction</a>
                </li>
               <li>
                 <a href="#">Reference Introduction</a>
                </li>
               <li>
                 <a href="#">Examples</a>
                </li>
            </ul>
           </li>
          </ul>
      </nav>
</body>

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Вы также можете сделать это с CSS, но вы упомянули, что хотите в jquery, поэтому я делаю это с Jquery.

Я думаю, вы хотите вот так: - 

$(document).ready(function(){
  $('.menu-item-text').mouseover(function(){
    $(this).next('.sub-menu').show();
  });
  $('.menu-item-text').mouseout(function(){
    $(this).next('.sub-menu').hide();
  });
});
.menu {
  margin-left: 220px;
}
.menu-item-text {
  display: inline-block;
  margin-top: 18px;
  color: black;
  font-weight: 550;
}
.menu-item-text:hover {
  content: '';
  color: red;
}
.menu-item-text:hover:after {
  content:'';
  display: block;
  border-bottom: 2px solid rgb(15, 1, 1);
  margin-top: 19px;
}
.sub-menu1 {
  background: yellowgreen;
  position: absolute;
  display: block;
}
.sub-menu li {
  white-space: nowrap;
  display: inline;
}
.sub-menu a:before {
  content: '☆';
  top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
  content: '★';
} 
.navigation .sub-menu {
  display: none;
}
.menu-act .menu-item-text  {
  color: red;
}
.sub-menu1 li, .sub-menu1 a {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navigation">
    <ul class="menu">
      <li class='menu-item' tabindex='0'>
         <span class="menu-item-text menu-act">About HTML</span>
        <ul class='sub-menu'>
            <li>
             <a href="#">HTML Introduction</a>
            </li>
           <li>
             <a href="#">Reference Introduction</a>
            </li>
           <li>
             <a href="#">Examples</a>
            </li>
        </ul>
       </li>
      </ul>
  </nav>
0 голосов
/ 12 сентября 2018

Вам не нужен JQuery для отображения подменю при наведении курсора.Вы можете сделать это с помощью CSS.

.menu-item:hover .sub-menu {display: block;}

Если имеется более одного подменю, используйте для них идентификатор или разные имена классов.Таким образом, вы можете отобразить соответствующее подменю в каждом меню. 

<style>
.menu {
  margin-left: 220px;
}
.menu-item-text {
  display: inline-block;
  margin-top: 18px;
  color: black;
  font-weight: 550;
}
.menu-item-text:hover {
  content: '';
  color: red;
}
.menu-item-text:hover:after {
  content:'';
  display: block;
  border-bottom: 2px solid rgb(15, 1, 1);
  margin-top: 19px;
}
.sub-menu1 {
  background: yellowgreen;
  position: absolute;
  display: block;
}
.sub-menu li {
  white-space: nowrap;
  display: inline;
}
.sub-menu a:before {
  content: '☆';
  top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
  content: '★';
} 

.menu-item:hover .sub-menu {display: block;}

.navigation .sub-menu {
  display: none;
}
.menu-act .menu-item-text  {
  color: red;
}
.sub-menu1 li, .sub-menu1 a {
  display: inline-block;
}
</style>
<body>
    <nav class="navigation">
        <ul class="menu">
          <li class='menu-item' tabindex='0'>
             <span class="menu-item-text menu-act">About HTML</span>
            <ul class='sub-menu'>
                <li>
                 <a href="#">HTML Introduction</a>
                </li>
               <li>
                 <a href="#">Reference Introduction</a>
                </li>
               <li>
                 <a href="#">Examples</a>
                </li>
            </ul>
           </li>
          </ul>
      </nav>
</body>

С JQuery вы можете смоделировать это следующим образом: 

$(".menu-item").on("mouseover", function(){   //This will display the submenu on mouse hover.
$(".sub-menu").show();
});

$(".menu-item").on("mouseout", function(){ //This will hide the submenu when mouse leaves the menu item.
$(".sub-menu").hide();
});
.menu {
  margin-left: 220px;
}
.menu-item-text {
  display: inline-block;
  margin-top: 18px;
  color: black;
  font-weight: 550;
}
.menu-item-text:hover {
  content: '';
  color: red;
}
.menu-item-text:hover:after {
  content:'';
  display: block;
  border-bottom: 2px solid rgb(15, 1, 1);
  margin-top: 19px;
}
.sub-menu1 {
  background: yellowgreen;
  position: absolute;
  display: block;
}
.sub-menu li {
  white-space: nowrap;
  display: inline;
}
.sub-menu a:before {
  content: '☆';
  top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
  content: '★';
} 

.navigation .sub-menu {
  display: none;
}
.menu-act .menu-item-text  {
  color: red;
}
.sub-menu1 li, .sub-menu1 a {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        <nav class="navigation">
            <ul class="menu">
              <li class='menu-item' tabindex='0'>
                 <span class="menu-item-text menu-act">About HTML</span>
                <ul class='sub-menu'>
                    <li>
                     <a href="#">HTML Introduction</a>
                    </li>
                   <li>
                     <a href="#">Reference Introduction</a>
                    </li>
                   <li>
                     <a href="#">Examples</a>
                    </li>
                </ul>
               </li>
              </ul>
          </nav>
    </body>

Вы можете использовать при наведении курсора и при наведении мыши или mouseleave события jQuery.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...