php - Menu bar flicker when goes to different page -

-

can suggest might problem on flickering menu bar?

please suggest make flickering of menu bar stop.

thanks much!

#mainmenu{     margin-bottom: 2.5em; } .menubar{     position: fixed;     top:0;     left:0;     max-height:10em;     width:100%;     list-style: none;     background-color:#333333;     text-align: left;     margin:0;     padding: 0;     z-index: 1;     border-bottom: 1px solid #ccc;  } .menubar .first {     margin-left: 1em; } .menubar li{     position: relative;     display: inline-block;     width:15em;     text-align: center;     font-family: 'oswald', sans-serif;     font-size: 1em;     border-bottom: none;     cursor: pointer;   }  .menubar li:hover{         background-color:#6666ff; } .menubar a{     display: block;     padding: 0.5em 0.5em 0.5em 0.5em;     text-decoration: none;     color:#ffffff; }    /* submenus */  .menubar .first .submenubar {     padding: 0;     position: absolute;     top:2em;     left:0;     width:auto;     display: none;      -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);     -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);     box-shadow: 0px 13px 25px rgba(0,0,0, 0.2); }  .menubar li .submenubar li {     text-align: left;     list-style-type: none;     background-color:brown;     display: block;     color:#fff;    } .menubar > li > .submenubar > li:hover {    background-color:black; } .menubar li:hover .submenubar{     display: block; }

see jsfiddle complete code.

i suspect 1 of 2 things happening.

  1. is whole header "flickering" when go new page? if so, that's because building html page php on server , rendering page again. flash. sucks.
  2. the sub-menu appears "flicker" because it's broken , when try , hove on it, disappears.

if it's 1, can use caching try , lessen chances of happening, or can learn how use ajax, or js framework build single page apps, that's lot of work.

if it's 2, code i'll include below, , this fiddle - set more solid code work with.

my real advice, never use drop-down menus. terrible interface pattern.


html

<nav class='container navigation'> <div class='inner-w'>      <ul class='menu'>         <li>             <a href='#'>top-level menu item 1</a>             <ul class='sub-menu'>                 <li><a href='#'>sub-menu item 1</a></li>                 <li><a href='#'>sub-menu item 2</a></li>                 <li><a href='#'>sub-menu item 3</a></li>                 <li><a href='#'>sub-menu item 4</a></li>             </ul>         </li>         <li><a href='#'>top-level menu item 2</a></li>         <li>             <a href='#'>top-level menu item 3</a>             <ul class='sub-menu'>                 <li><a href='#'>sub-menu item 1</a></li>                 <li><a href='#'>sub-menu item 2</a></li>             </ul>         </li>         <li><a href='#'>top-level menu item 4</a></li>     </ul>  </div> </nav>


css

/* global-structure */ .container {     width: 100%;     float: left; }  .container .inner-w {     margin-right: auto; margin-left: auto;     max-width: 900px; /* arbitrary */     /* should have clear-fix */ }  /* menu styles */ .menu, .menu ul {     list-style: none;     margin: 0;     padding: 0; }  .menu li {     float: left; }  .menu > li { /* top-level li */     position: relative;     /* sub-menu can positioned */     border-right: 1px solid rgba(0,0,0,.3) }  .menu > li:last-child {     border-right: 0; }  .menu {     display: block;     padding: .8rem .5rem;     background: #eee;     min-width: 160px;     color: inherit;     text-decoration: none; }  .sub-menu {     position: absolute;     top: 100%;     left: 0;     height: 0;     width: 0; /* hide visually */     overflow: hidden;     z-index: 5; /* arbitrary, keep them small though... */ }  .sub-menu li {     clear: left;     border-bottom: 1px solid rgba(0,0,0,.3) }  .sub-menu li:last-child {     border-bottom: 0; }  .sub-menu {     background: #ccc; }  .sub-menu a:hover {     background: #aaa; }  .menu > li:hover .sub-menu {     height: auto;     width: auto; }

if absolutely forced write drop-down menu, have this: http://codepen.io/sheriffderek/pen/qdbryb/?editors=010


Comments

Post a Comment

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

-
i trying use map can make tag names reference number. when try , use it, in code error (6 in total every time reference map): src/main.cpp:25:45: error: no viable overloaded operator[] type 'std::map<std::string, std::string>' const char* idcs = node.child_value(tagmap[3]); this code: #include "pugi/pugixml.hpp" #include <iostream> #include <string> #include <map> int main() { pugi::xml_document doca, docb; std::map<std::string, pugi::xml_node> mapa, mapb; std::map<std::string, std::string> tagmap {{"1", "data"}, {"2", "entry"}, {"3", "id"}, {"4", "content"}}; if (!doca.load_file("a.xml") || !docb.load_file("b.xml")) { std::cout << "can't find input files"; return 1; } (auto& node: doca.child(tagmap[1]).children(tagmap[2])) { co
Read more

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

-
i wish write custom appender on basis of outputstreamappender . wrote following class package tests; import java.io.ioexception; import java.io.outputstream; import ch.qos.logback.core.outputstreamappender; public class myappender<e> extends outputstreamappender<e> { public myappender() { system.out.println("myappender created"); setoutputstream(new outputstream() { @override public void write(int b) throws ioexception { throw new unsupportedoperationexception(); } }); } } then wrote following runner: package tests; import org.slf4j.loggerfactory; import ch.qos.logback.classic.logger; public class runner { private static final logger log = (logger) loggerfactory.getlogger(runner.class); public static void main(string[] args) { //log.addappender(new myappender<iloggingevent>()); log.info("hello world"); } } finall
Read more

java - Cannot secure connection using TLS -

-
i'm trying establish secure socket connection between java client applet (built jdk 1.7.0_75-b13) , vc++ server application. as test vehicle, used vc++ client/server sample found in msdn forums, modified use schannel , able establish socket using cipher suite tls_rsa_with_aes_128_cbc_sha. works of tls 1.0/1.1/1.2. when try opening socket java applet same server application, connection rejected server reporting following: tls 1.0 acceptsecuritycontext failed: 0x80090327 tls 1.1 acceptsecuritycontext failed: 0x80090331 tls 1.2 acceptsecuritycontext failed: 0x80090331 this java code used create socket: debugprint("setting secure connection"); sslsocketfactory sslsocketfactory = (sslsocketfactory) sslsocketfactory.getdefault(); sslsocket sslsocket = (sslsocket) sslsocketfactory.createsocket("127.0.0.1", socketnumber); debugprint("starting handshake"); sslsocket.settcpnodelay(true); sslsocket.setsolinger(false, 0); sslsocket.s
Read more