asp.net mvc - ASP MVC Bootstrap Navigation Dropdowns: Hover on Large Screen, Click on Small -

-

i using standard bootstrap class="nav navbar-nav" navigation dropdown menus:

<ul class="nav navbar-nav">     <li role="presentation" class="@html.isselected("appointments", "selected")">         <a data-toggle="dropdown" href="#"><img src="/content/images/nav_appts.png" style="padding: 0px 5px 3px 0px;">appointments<span class="caret"></span></a>         <ul class="dropdown-menu" role="menu">             <li>@html.actionlink("appointments page 1", "index", "appointments")</li>             <li>@html.actionlink("appointments page 2", "page2", "appointments")</li>         </ul>     </li>     // more menu items </ul>

out of box, dropdowns appear if click on them. found way make them appear if hover. in css:

/* causes dropdowns displayed on-hover instead of on-click */ ul.nav li.dropdown:hover > ul.dropdown-menu {     display: block;  }

this works great on standard large screen. once screen becomes tablet size, navigation switches box bars drops down show nav. once here, not want sub-menu items appear on hover. understand on tablets, concept of 'hover' doesn't exist, there no mouse. none less, in case using site small laptop (etc etc) want able control this. tried this:

@media screen , (max-width: 830px) {     ul.nav li.dropdown:hover > ul.dropdown-menu {         display: inline;       } }

and played around few other options, can't seem right.

use 2 rules different width each applies depending on screen size:

@media screen , (min-width: 831px) {     ul.nav li.dropdown:hover > ul.dropdown-menu {         display: block;       } }  @media screen , (max-width: 830px) {     ul.nav li.dropdown:hover > ul.dropdown-menu {         display: inline;       } }

Comments

Post a Comment

Popular posts from this blog

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

-
i'm running nodejs 0.12.3 - gulp 3.10.8 , gulp-nodemon 2.0.3. gulpfile.js : gulp.task('serve', ['build'], function() { gulp.start('fb-flo'); nodemon({ script: paths.server, env: { 'node_env': 'development' }, // env: { 'node_env': 'production' }, execmap: { 'js': 'node_modules/babel/bin/babel-node --stage 1' //es7 cote server }, delay: '0ms', watch: ['src/shared/', 'src/server/'], ignore: ['src/shared/components'], tasks: function (changedfiles) { var tasks = []; changedfiles.foreach(function (file) { if (path.extname(file) === '.jsx' && !~tasks.indexof('bundlejs')) tasks.push('bundlejs'); if (path.extname(file) === '.less' && !~tasks.indexof('compileless')) tasks.push('compileless'); }); return tasks; } ...
Read more

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

-
i trying make simple python program opening list of webpages user manually download reports site. don't have previous experience preparing exe files.. , i'm in learning process python coding. of done on windows 7 x64 this python code: #!c:/python34/python.exe -u splinter import * import time import os import csv #---------------------------------- raporty = [] open('../raporty.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') raporty.append(r) #--not implemented yet zmienne = [] open('../zmienne.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') zmienne.append(r) print("start") browser = browser(...
Read more

javascript - oscilloscope of speaker input stops rendering after a few seconds -

-
the following script reads audio user's microphone , renders oscilloscope on html canvas. the source taken example of mozilla developer network: visualizations web audio api and here fiddle: http://jsfiddle.net/b7j8pktp/ mozgetusermedia (note: code has no fork mechanism different browsers: works firefox) it works fine few seconds , stops rendering. whereas works totally stable: http://mdn.github.io/voice-change-o-matic/ the problem can reduced following code. microphone activation icon (next the address bar in firefox) disappears after 5 seconds: navigator.mozgetusermedia({audio: true}, function() {}, function() {} ); ( http://jsfiddle.net/b7j8pktp/2/ ) this known bug in firefox. take stream getusermedia call , hook window so: navigator.mozgetusermedia({audio: true}, function(stream) { window.stream = stream; // rest of code }, function err() { // handle error }); hopefully can fixed soon. problem we're f...
Read more