javascript - jQuery menu not collapsing in Safari -
i need this. i’ve created menu bar using combination of jquery , css , it's not collapsing or hiding way should in safari (i'm using 6.1.6).
i'll start code first
css code
#menuholder { width:200px; height:30px; background:#ccc; position:fixed; top:10px; border: thin ridge #333; } #menuitem1 { margin:0.15em; display:table; float:left; width:150px; height:25px; background:#666; } #menudiv { background-color:#fff; height:100px; width:150px; opacity:1; visibility:hidden; -webkit-transition: 0.5s ease-out-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; position:absolute; top:34px; margin-left:.1em; } #menuitem1:hover { background:#06f; } #menuitem1:hover #menudiv { opacity:1; visibility:visible; background-color:#f00; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } #menucontents { font-size:10px; } .ui-menu { width: 150px; }
html
<body> <div id="menuholder"> <div id="menuitem1"> menu 1 <div id="menudiv"> <ul id="menucontents"> <li>main menu 1 <ul> <li>mid menu 1 <ul> <li>sub menu 1.1</li> <li>sub menu 1.2</li> </ul> </li> </ul> </li> </ul> </div> </div> </div> </body>
javascript
$(function() { $( "#menucontents" ).menu(); });
the issue
as can see code, when mouse pointer goes menuitem1 div highlight div , unhide menudiv holds jquery menucontents. works fine , well, until click on of submenu items.
in other browsers (opera, mozilla, chrome) when click submenus, menus collapse normally, menudiv fades away, , menuitem1 unhighlights. in safari, mid , submenus fade away, menudiv never fades away, , menuitem1 remains highlighted if there still mouse pointer triggering css.
i unsure if css issue, jquery issue, or browser version issue. or guidance appreciated.
looks issue solved when upgraded yosemite means safari issue after all. menus collapse no issues. –
Comments
Post a Comment