Umrete Kurvi Umrete Kurvi - 20 days ago 9
CSS Question

Add caret Div to drop-down menu

I have a problem.Which is,I cannot add a div "caret" to my drop-down menu,on menus which have childs only.There is my code



$(document).ready(function(){
if ($('.mobile-menu li:has(sub-menu)'))
{
$('.mobile-menu li').parent('.ul').append('<div class=caret></div>');
}
else
{
alert('function is not working');
}

});

/************************************************
Mobile-Menu Style
************************************************/
.mobile-show{
dispay:block;
}
.mobile-menu{
position:fixed;
width:70%;
height:100%;
background:white;
z-index:1000;
}
.mobile-menu.sub-menu{
position:absolute;
}
.mobile-menu ul{
top:10.2%;
color:black;
position:relative;
text-align:left;
font-weight:bold;
}
.mobile-menu li a {
display: block;
padding: 4% 0;
border-bottom:1px solid black;
}
.mobile-menu > ul> li:hover > a, .mobile-menu > ul> li:hover > .sub-menu > li:hover > a, .mobile-menu > ul .sub-menu .sub-menu > li:hover > a{
background-color: #111;
color: #fff;
}
.mobile-menu ul li ul{
height:100%;
width:100%;
display:none;
background:#fff;
border:none;
position:relative;
}
.mobile-menu ul li:hover ul{
display:block;
}
/************************************************
Caret Design
************************************************/
.caret {
width:100%;
height:auto;
position:relative;
border-bottom:1px solid #000;
}

.caret:before {
content:"";
border-color: #FFF transparent transparent transparent;
border-style:solid;
border-width:12px;
width:0;
height:0;
position:absolute;
bottom:-24px;
left:45%;
z-index:1020;
}

.caret:after {
content:"";
border-color: #000 transparent transparent transparent;
border-style:solid;
border-width:12px;
width:0;
height:0;
position:absolute;
bottom:-25px;
left:45%;
}

<div class="mobile-menu">
<ul class="mobile-menu-ul">
<div class="caret"></div>
<?php wp_nav_menu(array (
'theme_location'=> 'new-menu',
'container' => '',
'items_wrap' => '%3$s'
)); ?>





I'am pretty new to this,and especially to jQuery.This is what my menu looks like right now :http://prntscr.com/d6txgx On top of the menu is what i want to look like when there are child elements in any of the menus.At the bottom is what looks like with my code at the moment...
I would appreciate any help!!THANK YOU ! :)

Answer

If it’s right you can just target the wordpress menu class .menu-item-has-children and target all the css of .caret on that.

Then you don't need jQuery!

/************************************************
Mobile-Menu Style
************************************************/
.mobile-show{
  dispay:block;
}
.mobile-menu{
  position:fixed;
  width:70%;
  height:100%;
  background:white;
  z-index:1000;
}
.mobile-menu.sub-menu{
  position:absolute;
}
.mobile-menu ul{
  top:10.2%;
  color:black;
  position:relative;
  text-align:left;
  font-weight:bold;
  list-style: none;
  padding: 0;
}
.mobile-menu li a {
  display: block;
  position: relative;
  padding: 4% 0;
  border-bottom:1px solid black;
}
.mobile-menu > ul> li:hover > a, .mobile-menu > ul> li:hover > .sub-menu > li:hover > a, .mobile-menu > ul .sub-menu  .sub-menu > li:hover > a{
  background-color: #111;
  color: #fff;
}
.mobile-menu ul li.menu-item-has-children ul{
  height:100%;
  width:100%;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  background:#fff;
  border:none;
  position:relative;
}
.mobile-menu ul li.menu-item-has-children:hover ul{
  display:block;
  visibility: visible;
  opacity: 1;
}

.menu-item-has-children > a{
  border-bottom:1px solid #000;
}

.menu-item-has-children > a:before  {
  content:"";
  border-color:#FFF transparent transparent transparent;
  border-style:solid;
  border-width:12px;
  width:0;
  height:0;
  position:absolute;
  bottom:-24px;
  left:45%;
  z-index:1020;
}
.menu-item-has-children > a:after {
  content:"";
  border-color:#000 transparent transparent transparent;
  border-style:solid;
  border-width:12px;
  width:0;
  height:0;
  position:absolute;
  bottom:-25px;
  left:45%;
}

.mobile-menu ul li.menu-item-has-children:hover a:before{
  border-color: transparent transparent #FFF transparent;
  bottom: 0;
}
.mobile-menu ul li.menu-item-has-children:hover a:after{
  border-color: transparent transparent #000 transparent;
  bottom: 0;
}
<div class="mobile-menu">
  <ul id="menu-top-menu" class="mobile-menu-ul">
    <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-35 dropdown">
      <a title="test page" href="http://wpbasis.com/test-page/" data-dropdown="dropdown" class="dropdown-toggle" aria-haspopup="true">test page <span class="caret"></span></a>
      <ul role="menu" class=" dropdown-menu">
        <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
          <a title="Checkout" href="http://wpbasis.com/checkout/">Checkout</a>
        </li>
        <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
          <a title="Cart" href="http://wpbasis.com/cart/">Cart</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Comments