Search code examples
jquerycsstext-alignmenttext-align

How to make the li elements aligned center in the case with wrap an element to the next line in the case with a multimenu?

I made a simple multimenu, the items of which can openened by mouse click , but I have a question with the solution of which I have difficulties. How to make the li elements aligned center in the case with wrap an element to the next line in the case with a multimenu?I made a simple multimenu, the items of which can openened by mouse click , but I have a question with the solution of which I have difficulties. How to make the li elements aligned center in the case with wrap an element to the next line in the case with a multimenu?

$(document).ready(function(e) {
        $('.parent').on('click', function(e) {
                $r=$(this).find('ul').attr("id");
                $check=$("#"+ $r).css('display');

                $("#"+ $r).css( {
                        'display': 'block',
                        'position': 'absolute',
                        'z-index': '9999'
                    }
                    
                );

                if ($check=="block") {
                    $("#"+ $r).css( {
                            'display': 'none'
                        }
                        
                    );
                }
                
                if ($(this).parent().attr('id')=="menu") {
                    $("li.parent > ul").not("#"+ $(this).find("ul").attr("id")).css( {
                            'display': 'none'
                        }
                        
                    );
                }
                
                return false;
            }
            
        );
    }
    
);
.parent {
    display: block;
    position: relative;
    float: left;
    line-height: 30px;
    background-color: black;
    border-right: #CCC 1px solid;
}

.parent a {
    margin: 10px;
    color: #FFFFFF;
    text-decoration: none;
}

.child {
    display: none;
}

.child li {
    background-color: #E4EFF7;
    line-height: 30px;
    border-bottom: #CCC 1px solid;
    border-right: #CCC 1px solid;
    width: 100%;
    background-color: black;
}

.child li a {
    color: #FFF;
    color: red;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0px;
    min-width: 10em;
}
/*
ul ul ul {
    left: 100%;
    top: 0;
    margin-left: 1px;
}
*/
li:hover {
    background-color: red;
}

.parent li:hover {
    background-color: #F0F0F0;
}

.expand {
    font-size: 12px;
    float: right;
    margin-right: 5px;
    color: red;
}

nav {
    margin: 0 auto;
    display: table;
    text-align: center;
}

nav ul {
    text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<nav style="text-align: center;">
   <ul id="menu" style="text-align:center !important">
      <li class="parent" id="a1">
         <a href="#">CAT 1</a>
         <ul class="child" id="cat1_1">
            <li class="parent" id="a2">
               <a href="#">SUB CAT1 <span class="expand">   
&#9660;</span></a>
               <ul class="child" id="cat1_2">
                  <li><a href="#">1</a></li>
                  <li class="parent" id="a3">
                     <a href="#">SUB CAT1_2<span class="expand">    
&#9660;</span></a>
                     <ul class="child" id="cat1_3">  
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                     </ul>
                  <li><a href="#">5</a></li>
               </ul>
            </li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
         </ul>
      </li>
      <li class="parent" id="b1">
         <a href="#">CAT 2</a>
         <ul class="child" id="cat2_1">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li class="parent" id="b2">
               <a href="#">SUB CAT 2<span class="expand"> 
               
                
&#9660;</span></a>
  <ul class="child" id="cat2_2">  
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                     </ul>
               <ul class="child">
                  <li><a href="#" nowrap>4</a></li>
                  <li><a href="#" nowrap>5</a></li>
               </ul>
            </li>
            <li><a href="#">6</a></li>
         </ul>
      </li>
      <li class="parent" id="c1"><a href="#">CAT 3</a>
      <li class="parent" id="e1"><a href="#">CAT 4</a>
      <li class="parent" id="f1"><a href="#">CAT 5</a>
      <li class="parent" id="g1"><a href="#">CAT 6</a>
      <li class="parent" id="i1">
         <a href="#">CAT 7</a>
         <ul class="child" id="cat7_1">
            <li><a href="#">1</a></li>
            <li class="parent" id="j1">
               <a href="#">SUB CAT 7 <span class="expand">  
&#9660;</span></a>
               <ul class="child" id="cat7_2">
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
               </ul>
            </li>
            <li><a href="#">6</a>
            </li>
            <li><a href="#">7</a></li>
         </ul>
      </li>
   </ul>
</nav>

Solution

  • You could use flex for this and remove the float styles.

    nav ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}


    $(document).ready(function(e) {
        $('.parent').on('click', function(e) {
                $r=$(this).find('ul').attr("id");
                $check=$("#"+ $r).css('display');

                $("#"+ $r).css( {
                        'display': 'block',
                        'position': 'absolute',
                        'z-index': '9999'
                    }
                    
                );

                if ($check=="block") {
                    $("#"+ $r).css( {
                            'display': 'none'
                        }
                        
                    );
                }
                
                if ($(this).parent().attr('id')=="menu") {
                    $("li.parent > ul").not("#"+ $(this).find("ul").attr("id")).css( {
                            'display': 'none'
                        }
                        
                    );
                }
                
                return false;
            }
            
        );
    }
    
);
    .parent {
    position: relative;
    line-height: 30px;
    background-color: black;
    border-right: #CCC 1px solid;
}

.parent a {
    margin: 10px;
    color: #FFFFFF;
    text-decoration: none;
}

.child {
    display: none;
}

.child li {
    background-color: #E4EFF7;
    line-height: 30px;
    border-bottom: #CCC 1px solid;
    border-right: #CCC 1px solid;
    width: 100%;
    background-color: black;
}

.child li a {
    color: #FFF;
    color: red;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0px;
    min-width: 10em;
}
/*
ul ul ul {
    left: 100%;
    top: 0;
    margin-left: 1px;
}
*/
li:hover {
    background-color: red;
}

.parent li:hover {
    background-color: #F0F0F0;
}

.expand {
    font-size: 12px;
    float: right;
    margin-right: 5px;
    color: red;
}

nav {
    margin: 0 auto;
}

nav ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<nav style="text-align: center;">
   <ul id="menu" style="text-align:center !important">
      <li class="parent" id="a1">
         <a href="#">CAT 1</a>
         <ul class="child" id="cat1_1">
            <li class="parent" id="a2">
               <a href="#">SUB CAT1 <span class="expand">   
&#9660;</span></a>
               <ul class="child" id="cat1_2">
                  <li><a href="#">1</a></li>
                  <li class="parent" id="a3">
                     <a href="#">SUB CAT1_2<span class="expand">    
&#9660;</span></a>
                     <ul class="child" id="cat1_3">  
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                     </ul>
                  <li><a href="#">5</a></li>
               </ul>
            </li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
         </ul>
      </li>
      <li class="parent" id="b1">
         <a href="#">CAT 2</a>
         <ul class="child" id="cat2_1">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li class="parent" id="b2">
               <a href="#">SUB CAT 2<span class="expand"> 
               
                
&#9660;</span></a>
  <ul class="child" id="cat2_2">  
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                     </ul>
               <ul class="child">
                  <li><a href="#" nowrap>4</a></li>
                  <li><a href="#" nowrap>5</a></li>
               </ul>
            </li>
            <li><a href="#">6</a></li>
         </ul>
      </li>
      <li class="parent" id="c1"><a href="#">CAT 3</a>
      <li class="parent" id="e1"><a href="#">CAT 4</a>
      <li class="parent" id="f1"><a href="#">CAT 5</a>
      <li class="parent" id="g1"><a href="#">CAT 6</a>
      <li class="parent" id="i1">
         <a href="#">CAT 7</a>
         <ul class="child" id="cat7_1">
            <li><a href="#">1</a></li>
            <li class="parent" id="j1">
               <a href="#">SUB CAT 7 <span class="expand">  
&#9660;</span></a>
               <ul class="child" id="cat7_2">
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
               </ul>
            </li>
            <li><a href="#">6</a>
            </li>
            <li><a href="#">7</a></li>
         </ul>
      </li>
   </ul>
</nav>