jquery - Mobile Drop Down Menu -


my menu works fine in browsers , under mobile preview in chrome. if load site on mobile device menu expands display submenus. when click on submenu, instead of clicking on link collapses menu menu.

css

/*  nav  */ .nav { padding-top: 50px; margin-bottom: -2px; } .nav ul { list-style-type: none; } .nav ul li { font-size: 15px; line-height: 1.6; text-transform: uppercase;       font-family: 'myriad'; float: left; position: relative; } .nav ul li { color: #687074; display: block; padding: 5px 25px; border-bottom: 2px solid #e5e5e5; transition: color .2s, border-color .2s; } .nav ul li .fa { margin-left: 5px; } .nav ul li.current a, .nav ul li a:hover { color: #d35400; border-bottom: 2px solid #d35400; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #fff; border-bottom: 2px solid #d35400; }  .nav ul li .dropdown-menu { box-shadow: 0 3px 3px rgba(0, 0, 0, .15); border: 0; border-radius: 0; margin-top: 0; padding: 0; } .nav ul li .dropdown-menu li { float: none; display: block; width: 100%; }  .nav .nav-dropdown { min-width: 150px; display: none; position: absolute; top: 100%; left: 0; background-color: #fff; border-bottom: 2px solid #585f69; } .nav .nav-dropdown li { font-size: 14px; text-align: center; float: none; }  .nav > ul > li.hover .nav-dropdown, .nav > ul > li:hover .nav-dropdown { display: block; }  /*  nav access  */ .nav-access { display: block; position: absolute; top: 10px; right: 0; } .nav-access ul { list-style-type: none; } .nav-access ul li { font-size: 12px; line-height: 1.17; text-transform:   uppercase; float: left; border-left: 1px solid #9b9b9b; padding-left: 5px; margin-left: 5px; } .nav-access ul li:first-child { border-left: 0; margin-left: 0; padding-left: 0; } .nav-access ul li { color: #9b9b9b; transition: color .2s; } .nav-access ul li a:hover { color: #d35400; }  /*  responsive  */  @media (max-width: 1199px) {  .nav ul li { padding: 5px 10px; }  }  @media (max-width: 992px) {  .nav ul li { font-size: 14px; } .nav ul li { padding: 5px 8px; }  .nav .nav-dropdown li { font-size: 13px; }  } @media (min-width: 768px) { .dropdown:hover .dropdown-menu {     display: block; } }     @media (max-width: 767px) {  .nav-access { position: static; } .nav-access ul li { text-align: center; font-size: 13px; font-family:  'myriad'; display: block; float: none; padding-left: 0; margin-left: 0; border-left: 0; } .nav-access ul li { display: block; padding: 5px; border-bottom: 2px solid #e5e5e5;}  .nav { margin: auto; padding: 0; } .nav ul li { text-align: center; display: block; float: none; } .nav ul li { padding-top: 5px;}  .nav .nav-dropdown { position: static; }  .nav-btn { width: 30px; height: 30px; display: block; position: absolute; top: 50%; right: 0; margin-top: -15px; background-color: #535a65; border-radius: 3px; transition: .2s; } .nav-btn span { width: 20px; height: 3px; display: block; position: absolute; top: 14px; left: 5px; background-color: #898989; transition: .2s; } .nav-btn:before, .nav-btn:after { content: ''; width: 20px; height: 3px; display: block; position: absolute; left: 5px; background-color: #898989; transition: .2s; } .nav-btn:before { top: 8px; } .nav-btn:after { top: 20px; } .nav-btn.active { background-color: #6d727b; } .nav-btn.active span { background-color: #d35400; } .nav-btn.active:before, .nav-btn.active:after { background-color: #d35400; }  .dropdown-menu { float: none; position: static; width: 100%; } .dropdown-menu li { font-size: 13px; background-color: #fff; } .dropdown-menu li > a, .dropdown-menu li > a:hover, .dropdown-menu li > a:focus { background-color: #f5f5f5; }  }

function.js

$doc.ready(function() {     // mobile navigation     $('.nav-btn').on('click', function(e) {         $(this).toggleclass('active');          $('.header-content').toggleclass('expanded');          e.preventdefault();     });


-

Comments

Post a Comment

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

the default binder in web api expecst http://url.com/webapi/report/?pageids=3243&pageids=2365 to bind public ihttpactionresult report(list<int> pageids){ // exciting webapi code} i wish bind http://url.com/webapi/report/?pageids=3243,2365 as running out of space in url get . i have created class public class commaseparatedmodelbinder : system.web.http.modelbinding.imodelbinder { public bool bindmodel(httpactioncontext actioncontext, modelbindingcontext bindingcontext) { //binding in here } } and registered in webapiconfig.cs var provider = new simplemodelbinderprovider( typeof(list<int>), new commaseparatedmodelbinder()); config.services.insert(typeof(modelbinderprovider), 0, provider); i have altered method signature use model binder so public ihttpactionresult report( [modelbinder] list<int> pageids){ // exciting webapi code} however break point in binder not being
Read more

Delphi 7 and decode UTF-8 base64 -

in delphi 7, have widestring encoded base64(that received web service widestring result) : pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg== when decoded it, result not utf-8: <?xml version="1.0"?> <string>طھط³طھ</string> but when decoded base64decode.org, result true : <?xml version="1.0"?> <string>تست</string> i have use encddecd unit decodestring function. the problem have using decodestring . function, in delphi 7, treats decoded binary data being ansi encoded. , problem text utf-8 encoded. to continue encddecd unit have couple of options. can switch decodestream . instance, code produce utf-8 encoded text file data: {$apptype console} uses classes, encddecd; const data = 'pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg=='; var input: tstringstream; output: tfilestream; begin input := tstringstream.create(data); try output := tfilestream.
Read more

html - Is there any way to exclude a single element from the style? (Bootstrap) -

so, have img logo, overlaid on div styled background-image: url("...") , , both elements inside 2 div classes .to-color , .to-overlay respectively, black transparent overlay. is there way exclude logo style given these 2 classes? here's jsfiddle example: link html , css example: - html - <div class="to-color"> <div class="to-overlay"> <div class="respo"> <div class="row"> <div class="col-xs-4 col-xs-offset-4 text-center"> <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> </div> </div> </div> </div> </div> - css - .to-color { background-color: #000; } .to-overlay { opacity : 0.5; } .respo { background-image: url("https://source.unsplash.com/category/objects/1600x900"); background-position: center center;
Read more