Selecting Parent Menu Should Show Child Menu

Selecting parent menu should show child menu

You can create your main top links with secondary nested like so

<ul class="primary">
   <li>Tutorial</li>
      <ul class="secondary">
         <li>Photoshop</li>
         <li>Illustrator</li>
         <li>Flash</li>
         <li>HTML</li>
         <li>PHP</li>
         <li>Wordpress</li>
         <li>jQuery</li>
         <li>more...</li>
      </ul>
   <li>Wallpaper</li>
   <li>Get A Quote</li>
   <li>Photography</li>
   <li>Freelance</li>
</ul>

then your styling would be like so ( this is using just CSS3, not JS )

<style>
   ul.primary {
      width: -- ;
      height: -- ;
      margin: -- ;
      overflow: hidden;
   }

   ul.primary > li {
      width: -- ;
      height: -- ;
      margin: -- ;
      float: left;
      list-style: none;
   }

   ul.seconday {
      opacity: 0;
      width: -- ;
      height: -- ;
      margin: -- ; /* when this is used with position: relative you can adjust where the drop down is placed. */
      position: relative; /* need to set this to relative to position properly */

      /* css3 transition */
      transition: all .5s ease-in;
      -webkit-transition: all .5s ease-in;
      -moz-transition: all .5s ease-in;
      -ms-transition: all .5s ease-in;
      -o-transition: all .5s ease-in;
   }

   ul.primary > li:hover ul.secondary {
      opacity: 1;
   }
</style>

keep the selected parent menu open when a child menu is selected in Js accordian menu

You can check the state of the sub items and open/show list if the one of the list item is active.

    if ($('#accordion .submenu li.active').length > 0 ) {
        $($('#accordion .submenu li.active')[0]).parent().show();
    }

https://jsfiddle.net/xwfp6cy1/

pulldown menu option parent-child

I need to thank Shadow for the hint.
After a lot of trouble I was finally able to obtain the desired result.
Basically, I just wrote a piece of Python code and call it via Ajax. Then a Javascript script will handle changes on pulldowns and displays related contents only.

Selecting submenu of Parent list not child list

As I commented above here is the selector you can use (after correcting you markup):

$("#top-menu > li > ul.sub-menu").css('border', '1px solid #000');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="top-menu">  <li>    <ul class="sub-menu" style="border :1px solid red"> //need to select this only      <li>        <ul class="sub-menu" style="border :1px solid red"> // Not this
        </ul>      </li>    </ul>  </li>  <li></li>  <li></li>  <ul class="sub-menu">    <li></li>    <ul class="sub-menu">      <li></li>      <li></li>      <li></li>    </ul>  </ul></div>

Display selected menu Item has to display in the parent

Despite a menu uses a DataSource for building the initial content, then it is no longer used and any operation in the DataSource is not directly reflected in the Menu. Which means that you have to manipulate DOM objects for replacing the text.

// Get selected text
var text = $(e.item).text();
// Get the first parent (in case you have multiple menu levels) 
var topParent = $(e.item).parents("li").last();
// And now go to the node that contains the text
var textParent = $("> span.k-link",  topParent);
// Go to the content (text) and replace it with child text
textParent.contents().first()[0].textContent = text;

See it in action here : http://jsfiddle.net/OnaBai/kfcdF/

Get All The Child Details of Parent Menu

You could use a recursive CTE to get all the parent menus.

WITH 
CTE (MENUNO,
     MENUNAME,
     PARENT) AS
(
SELECT M.MENUNO,
       M.MENUNAME,
       M.PARENT
       FROM USER_DETAILS U
            INNER JOIN USER_GROUP_DETAILS UG
                       ON UG.EMPNO = U.EMPNO
            INNER JOIN ASSIGN_MENU_DETAILS AM
                       ON AM.GROUPNO = UG.GROUPNO
            INNER JOIN MENU_DETAILS M
                       ON M.MENUNO = AM.MENUNO
       WHERE U.EMPNO = 'EMP-0001'
UNION ALL
SELECT M.MENUNO,
       M.MENUNAME,
       M.PARENT
       FROM MENU_DETAILS M
            INNER JOIN CTE C
                       ON C.PARENT = M.MENUNO
)
SELECT DISTINCT
       MENUNO,
       MENUNAME
       FROM CTE;

db<>fiddle

Wordpress - Highlight the parent menu-item when child menu item page is selected/loaded

you can assign current-menu-item class to .current-menu-ancestor class like

.main_menu li.current-menu-item a, .main_menu li.current-menu-ancestor a{
    color: #777777 !important; /* highlight color */
}

It will highlight parent page menu

Please refer this page

Set parent menu item and child sub menu item to active based on URL using jQuery

Try this:

$(document).ready(function () {
    var str = location.href.toLowerCase();

    $("#menu1 li a").each(function () {
        if (str.indexOf(this.href.toLowerCase()) > -1) {

            $("#menu1 li.active").removeClass("active");

            $(this).parent().addClass("active");

        }

    });

    $("#menu2 li a").each(function () {
        if (str.indexOf(this.href.toLowerCase()) > -1) {

            $("#menu2 li.active").removeClass("active");

            $(this).parent().addClass("active");

        }

    });
});

---

Related Topics