Bootstrap di Twitter: menu a discesa Hover per desktop, fare clic su Tablet/telefoni?

Sembra che ci siano molte domande/risposte su come cambiare i menu a discesa di Bootstrap di Twitter da apparire su un clic per apparire su un hover. I builder di Bootstrap hanno una buona ragione per utilizzare il clic anziché il passaggio del mouse: il passaggio del mouse non funziona sulla maggior parte dei tablet & telefoni. Tuttavia, uno dei motivi per cui sto usando Bootstrap è per le sue caratteristiche di risposta. Voglio un sito che può essere visualizzato su desktop, tablet e telefoni. Sebbene sia necessario fare clic per ottenere il menu a discesa per tablet e telefoni, non è il comportamento previsto per i desktop. Mi piacerebbe che il mio sito fosse reattivo, ma non a spese di dover riqualificare gli utenti!Bootstrap di Twitter: menu a discesa Hover per desktop, fare clic su Tablet/telefoni?

C'è un modo per offrire elenchi a discesa di hover per desktop e fare clic su menu a discesa per tablet e telefoni?

fonte

2012-06-18 Tonya Abna

È possibile con "classi di utilità Responsive"

http://twitter.github.com/bootstrap/scaffolding.html in fondo alla pagina

fonte

2012-06-18 22:42:35 baptme

In realtà, utilizzando classi di utilità reattivo, sembra avrei dovuto avere due versioni separate del mio menu. Uno mostrerebbe per telefono/tablet e uno mostrerebbe per desktop. Idealmente, voglio solo un menu. –

@TonyaAbna puoi farlo http://jsfiddle.net/baptme/gRVU/1/1/ ma avrai bisogno di un po 'di jQuery per chiudere il menu a discesa al secondo clic. – baptme

baptme, non sono sicuro di aver capito la tua risposta. Vedo come hai fatto il menu a discesa su hover invece di fare clic, ma sto cercando una soluzione che possa fare il passaggio del mouse per desktop e fare clic per telefono/tablet. Mi manca qualcosa nella tua demo? Che cosa fa la funzione clic vuota? –

ho creato un plugin (che lavora su un paio di parametri, ma funziona sicuramente come è) che permette menù a discesa di lavorare al passaggio del mouse, ma non interferisce con l'evento click di Bootstrap di Twitter, quindi puoi tranquillamente associarli entrambi, il che significa essenzialmente che se c'è un mouse, si attiverà al passaggio del mouse, ma se non c'è un mouse (cioè un touchscreen su un tablet), si attiverà ancora quando si fa clic.

mi hai il plugin ospitato su GitHub: https://github.com/CWSpear/twitter-bootstrap-hover-dropdown

Funziona richiamando esplicitamente, ma ho intenzione di modificare il codice per lavorare con i dati-attributi nel prossimo futuro.

fonte

2012-10-17 15:22:27 CWSpear

CWSpear: il tuo plugin funziona in modo fantastico e semplicissimo da installare/utilizzare. Apprezzo davvero che tu lo abbia condiviso. Grazie! ~ Susan – susan

è molto bello ..e facile @CWSpear –

Stavo cercando esattamente questo. E ho trovato una soluzione migliore (credo). Possiamo facilmente farlo utilizzando la fantastica libreria Modernizr.js. Siamo in grado di rilevare il dispositivo touch screen dalla funzione seguente.

function is_touch_device() { 
    return !!('ontouchstart' in window); 
}

E poi possiamo disabilitare l'URL nella collegamenti ipertestuali in modo dinamico tramite Javascript sia cambiando la posizione di "#" o impedendo l'azione di default delle voci del menu principale. Il codice finale sarebbe il seguente.

Per maggiori dettagli, si può vedere this link Credo che qualcuno mi votare fino :-)

Grazie

fonte

2015-08-13 17:46:29

La tua soluzione non sembra avere molto a che fare con la libreria Modernizr.js ... sembra che funzionerebbe quasi alla lettera anche con jQuery. (modifica: refuso nel nome della libreria) –

Bootstrap di Twitter: menu a discesa Hover per desktop, fare clic su Tablet/telefoni?

risposta

Problemi correlati