PHP [SOLVED]: stay multi drop down page for given time

PHP [SOLVED]: stay multi drop down page for given time

Home Forums Scripting PHP Tutorials PHP [SOLVED]: stay multi drop down page for given time

Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #245528

    Cloudy Point
    Keymaster

    QuestionQuestion

    i designed a drop down and that second level drop down page is form now when i want that second level drop down page stay longer , for that i used java script code that is here

    <script>
    var timer;
    $(".parent").on("mouseover", function() {
      clearTimeout(timer);
        openSubmenu();
    }).on("mouseleave", function() {
      timer = setTimeout(
        closeSubmenu
      , 1000);
    });
    
    function openSubmenu() {
      $(".submenu").addClass("open");
    }
    function closeSubmenu() {
      $(".submenu").removeClass("open");
    }
    </script>
    

    And here is code for making multiple drop down

    <div class="dropdown">
     <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#" style=" padding-top: 3px; padding-bottom: 3px;"> Action <span class="caret"></span>
      </a>
     <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
      <li><a href="index.php?index_edit_id=<?php echo $c_id;?>"><button class="btn btn-default btn-sm remove" ><i class="fa fa-pencil-square-o fa-lg" aria-hidden='true' style=" font-weight:10px;"> Edit-Update</i></button></a></li>
     <div class="divider"></div>
     <li class="dropdown-submenu parent">
      <a href="#"><i class="fa fa-hand-o-left" aria-hidden="true"style="padding-left:10px;">Edit-File</i></a>
                        <ul class="dropdown-menu submenu">
                         Here is code of form 
                    </ul>
                  </li>
             </ul>
     </div>
    

    and this is css i am using , i just want when i am drop down from edit-file then my drop down page should stop for given time

    .dropdown-submenu {
        position: relative;
    }
    .dropdown-submenu>.dropdown-menu {
        top: 0;
        right: 100%;
        margin-top: -210px;
        margin-left: -150px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }
    .dropdown-submenu:hover>.dropdown-menu {
       display: block;
    }
    .dropdown-submenu>a:after {
        display: block;
        content: " ";
        float:left;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }
    .dropdown-submenu:hover>a:after {
       border-left-color: #fff;
    }
    .multi-level
    {
       position:justify;
       right:100%;
       margin-left:-60px;   
    }
    

    Please help me .

    #245529

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    Check this…

    <style>
    .dropdown-submenu {
        position: relative;
    }
    .dropdown-submenu>.dropdown-menu {
        top: 0;
        right: 100%;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }
    .dropdown-submenu:hover>.dropdown-menu {
       display: block;
    }
    .dropdown-submenu>a:after {
        display: block;
        content: " ";
        float:left;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }
    .dropdown-submenu:hover>a:after {
       border-left-color: #fff;
    }
    .multi-level
    {
       position:justify;
       right:100%;
    }
    
    </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="dropdown">
        <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#" style=" padding-top: 3px; padding-bottom: 3px;">Action
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
            <li>
                <a href="index.php?index_edit_id=<?php echo $c_id;?>">
                    <button class="btn btn-default btn-sm remove" >
                        <i class="fa fa-pencil-square-o fa-lg" aria-hidden='true' style=" font-weight:10px;"> Edit-Update</i>
                    </button>
                </a>
            </li>
            <div class="divider"></div>
            <li class="dropdown-submenu parent">
                <a href="#"><i class="fa fa-hand-o-left parent" aria-hidden="true"style="padding-left:10px;">Edit-File</i></a>
                <ul class="dropdown-menu submenu">
                    <li>
                        <form>
                            <p><input /></p>
                            <p><input /></p>
                            <p><input /></p>
                        </form>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    
       <script>
    var timer;
        $(".parent").on("mouseover", function() {
            clearTimeout(timer);
            openSubmenu();
        }).on("mouseleave", function() {
            timer = setTimeout(
                closeSubmenu
            , 1000);
        });
    
        function openSubmenu() {
            $(".submenu").show();
        }
        function closeSubmenu() {
            $(".submenu").hide();
        }
    </script>
    

    Source: https://stackoverflow.com/questions/48020232/stay-multi-drop-down-page-for-given-time
    Author: Gyandeep Sharma
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.