i creating demo homework. navigation not displaying correctly. have been trying fix problem in many ways none of them work.
demo here demo
<body> <div class="container"> <div class="content"> <div id="menu"> <ul class="parent-menu"> <li> <a href="#">home & kitchen</a> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> </li> <li> <a href="#">electronics</a> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> </li> <li> <a href="#">clothing</a> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> < </ul> </li> <li> <a href="#">cars & motorbikes</a> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> < </ul> </li> <li> <a href="#">books</a> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> </li> <li> <a href="#">support</a> <ul> <li> <a href="#">contact us</a> </li> <li> <a href="#">forum</a> </li> <li><a href="#">deliveries</a></li> <li><a href="#">t&c</a></li> </ul> </li> </ul> </div> <!-----------shorcut panel content---------> <div class="shortcutpanel"> <div class="usergroup"> </div> </div> </div> </body> here css code.
/* basic style */ html, body{ height:100%; } body { background-color: grey; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; background-size:cover; } /*global setting*/ .hover{ float:left; display: inline-block; vertical-align: middle; -webkit-transform: translatez(0); transform: translatez(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; overflow: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color, background-color; transition-property: color, background-color; } .hover:active, .hover:hover, .hover:focus{ background-color: rgba(32, 152, 209, 0.5); } .container{ height:100%; width:100%; } .content{ position:fixed; top:10%; left:0%; height:90%; width:100%; } /* navigation*/ p, ul, li, div, nav { padding:0; margin:0; } #menu { overflow: hidden; position:fixed ; left:0%; top:20%; z-index:999; } .parent-menu { background-color: #0c8fff; width:180px; } #menu ul { list-style-type:none; } #menu ul li { padding:10px 15px; display:block; color:#fff; text-decoration:none; } #menu ul li a:hover { background-color:#007ee9; } #menu ul li:hover > ul { left: 200px; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; } #menu ul li > ul { position: absolute; background-color: #333; top: 0; left: -200px; min-width: 200px; z-index: 999; height: 100%; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; } #menu ul li > ul li a:hover { background-color:#2e2e2e; } #menu ul li a:focus + ul { left: 200px; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; } /* shortcut panel content */ .shortcutpanel{ position:relative; left:10%; top:5%; height:90%; width:30%; float:left; margin:0; padding:0; background-color:rgba(255,240,240,0.1); } here demo,its navigation effect want.
but in first demo.when hover on navi menu, 2nd level menu come out display incorrectly. don't know how solve this.
thanks helps guys
if question right.. u can width animation.. , change :focus :hover + ul
#menu ul li:hover > ul { left: 200px; width: 200px; } #menu ul li > ul { width: 0px; } #menu ul li a:hover + ul { width: 200px; -webkit-transition: width 300ms ease-in; -moz-transition: width 300ms ease-in; -ms-transition: width 300ms ease-in; transition: width 300ms ease-in; } hope helps..
Comments
Post a Comment