javascript - Separate activation of <span> inside <li> of JQuery Menu -
i wondering if can have separate element(<span>) on <li> using jquery menu, default style activating entire <li> , need have activate <span> being hover/focus user. possible or can guide me on should start?
<ul id="menu"> <li>a</li> <li>b <ul> <li><span>b - 1.1</span><span>b - 1.2</span></li> <li><span>b - 2.1</span><span>b - 2.2</span></li> </ul> </li> <li>c</li> </ul> see fiddle demo activates b - 1.1 , b - 1.2 simultaneously.
does kinda work you:
.ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span {background: #fff;} .ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span:hover {background: transparent;} fiddle: https://jsfiddle.net/s7z9dpdd/
tried version padding:
.ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span {background: #fff; display: inline-block; margin: -5px 0; padding: 5px 0;} .ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span:hover {background: transparent;} fiddle: https://jsfiddle.net/fjmfk7qb/
final masterpiece
.ui-menu { width: 150px; } .ui-menu .ui-menu {width: auto;} .ui-menu .ui-menu > .ui-menu-item {padding: 0; width: auto; white-space: nowrap;} .ui-menu .ui-menu > .ui-menu-item > span {background: #fff; display: inline-block; padding: 5px 0;} .ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span:hover {background: transparent;} fiddle: https://jsfiddle.net/6p8trnnn/
Comments
Post a Comment