ciao ! per la mia interfaccia responsive che utilizza bootstrap vorrei rendere visibile un bottone per device < 767 px che mi attiva e disattiva un menu . fin qui ci sono riuscito . ora pero' vorrei che la situazione iniziale di apertura sia quella in cui bottone e menu siano visibili entrambi e quindi successivamente a discrezione dell'utente si puo tramite il bottone renedere hidden/visible il menu.
come potrei fare ?
grazie
Si puo` fare con JS, con un codice di questo tipo:Se preferisci puoi usare l'attributo display con valore nonecodice:<div id="nascondibile"> ... qui tutto quello che vuoi nascondere ... <button onclick="document.getElementsById('nascondibile').style.visbility = 'hidden';">premi per nascondere</button> </div>
Sposto in JS
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
ok grazie della rispostaOriginariamente inviata da Mich_
ma vorrei che il bottone sia fuori rispetto al blocco del menu ..... cioe' io utilizzando bootstrap e ho scritto cosi' : [code]
<div class="row" id="bottone">
<p class="pull-left visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">MENU </button>
</p>
</div> <!-- /.row bottone -->
<div class="row row-offcanvas row-offcanvas-left">
<div class=" col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
.......................
<div class=" col-xs-12 col-sm-9">
........................
[code]
siccome sto usando delle classi di bootstrap (row-offcanvas) che si occupano già della visibilita/non visibilità del menu come potrei integrare il tuo suggerimento nel mio codice ?
lascio perdere bootstrap e seguo la tua strada ?
grazie
Non conosco bootstrap, per cui non so come integrare.
La mia tecnica e` applicabile anche se il bottone e` esterno. In tal caso il bottone puo` anche diventare un toggle:Ho qualche dubbio sulla sintassi JS: sono un po' arrugginito.codice:<button onclick="var nn=document.getElementsById('nascondibile'); if(nn.style.visibility='hidden') nn.style.visibility='visible' else nn.style.visibility='hidden';">toggle visibilita</button>
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
ok provo il tuo js ma non mi funziona:
<!DOCTYPE html>
<html>
<head>
<title>PROVA</title>
</head>
<body>
<button onclick=
"var nn=document.getElementsById('nascondibile');
if(nn.style.visibility='hidden')
nn.style.visibility='visible'
else nn.style.visibility='hidden';">toggle visibilita</button>
<div id="nascondibile">
<h1>Shrink Width to Collapse Sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus. Fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, a
euismod diam metus eu enim. Nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis.
Nam neque tellus, tristique in est vel, sagittis congue turpis. Aliquam nulla lacus, laoreet dapibus
odio vitae, posuere volutpat magna. Nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim
eleifend. Integer sit amet ante auctor, lacinia sem quis, consectetur nulla.</p>
<p>Vestibulum porttitor massa eget pellentesque eleifend. Suspendisse tempor, nisi eu placerat auctor,
est erat tempus neque, pellentesque venenatis eros lorem vel quam. Nulla luctus malesuada porttitor.
Fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. Quisque facilisis risus
in lacus sagittis malesuada. Suspendisse non purus diam. Nunc commodo felis sit amet tortor
adipiscing varius. Fusce commodo nulla quis fermentum hendrerit. Donec vulputate, tellus sed
venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem.</p>
<p>Fusce sollicitudin lacus lacinia mi tincidunt ullamcorper. Aenean velit ipsum, vestibulum nec
tincidunt eu, lobortis vitae erat. Nullam ultricies fringilla ultricies. Sed euismod nibh quis
tincidunt dapibus. Nulla quam velit, porta sit amet felis eu, auctor fringilla elit. Donec
convallis tincidunt nibh, quis pellentesque sapien condimentum a. Phasellus purus dui, rhoncus
id suscipit id, ornare et sem. Duis aliquet posuere arcu a ornare. Pellentesque consequat libero
id massa accumsan volutpat. Fusce a hendrerit lacus. Nam elementum ac eros eu porttitor.
Phasellus enim mi, auctor sit amet luctus a, commodo fermentum arcu. In volutpat scelerisque
quam, nec lacinia libero.</p>
<p>Aliquam a lacinia orci, iaculis porttitor neque. Nullam cursus dolor tempus mauris posuere, eu
scelerisque sem tincidunt. Praesent blandit sapien at sem pulvinar, vel egestas orci varius.
Praesent vitae purus at ante aliquet luctus vel quis nibh. Mauris id nulla vitae est lacinia
rhoncus a vel justo. Donec iaculis quis sapien vel molestie. Aliquam sed elementum orci.
Vestibulum tristique tempor risus et malesuada. Sed eget ligula sed quam placerat dapibus.
Integer accumsan ac massa at tempus.</p>
</div>
</body>
</html>
ho aggiunto questo style nell'head :
<style>
#nascondibile {
visibility: visible
}
</style>
ma ancora non si vede l'effetto
Quello e` corretto.
Il dubbio che ho e` sulla sintassi del codice JS (non sulla logica), ma ora non ho tempo di rivedermi le regole di sintassi.
magari qualcuno in questo forum le ha presenti ...
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
ho trovato l'errore nel tuo js : nella if era "==" al posto di "="
la visibilità funziona ! grazie
ora non so bene se questo risultato puo' essermi utile....perchè io praticamente vorrei implementare una navigazione offcanvas . inizialmente ero partito con bootstrap perchè mi esentava dallo scrivere javascript ed ora praticamente sto cercando una via per risolvere la mia esigenza che bootstrap non prevede.....
Ah ecco ...
ultimamente ho dovuto usare VBA (in Excel) e li' la sintassi e` diversa ...
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
cmq sono bloccato
aspetto sempre qualche aiuto ! (anche da te Mich se puoi)
Permessi di invio
Rispondi quotando