Nwlapcug.com


JavaScript vs CSS Menu

JavaScript vs CSS Menu


Fin dall'inizio di Internet, pagine Web hanno utilizzato i menu per la navigazione. Lontano le liste di semplice collegamento orizzontale e verticale di un tempo, oggi siti Web utilizzano strutture di navigazione complicata con collegamento evidenziando, drop-down menu, fly-out e altro ancora. Creazione di menu più complessi e interattivi richiede una combinazione di codice Cascading Style Sheet (CSS) e JavaScript. Piuttosto che pensare di JavaScript e CSS, è possibile utilizzare JavaScript per integrare il vostro codice CSS e soprattutto per fornire effetti speciali o massimizzare la compatibilità browser.

CSS per i menu

Gli sviluppatori possono creare menu mozzafiati manipolando elenchi non ordinati con i CSS. Questa tecnica permette una grande quantità di varietà nel menu, come pure effetti come angoli arrotondati, sfumature, ombre e altri. La maggior parte di questi effetti sono grazie a CSS Level 3 (CSS3). Esistono alcuni problemi quando si tenta di rendere questi menu funzionano con browser meno recenti che non supportano CSS3 o includere i bug che ostacolano la codifica CSS in generale. In particolare, quando lo stile di un menu in CSS per Internet Explorer 6, è possibile utilizzare la pseudo-classe "hover" per attivare uno stato di librarsi per qualcosa di diverso da collegamenti effettivi. Questa limitazione di browser crea problemi quando menu richiedono un stato hover per un elemento dell'intero elenco.

Indietro compatibilità per i CSS

Al fine di affrontare il problema delle indietro compatibilità quando i browser non supportano le proprietà CSS3, si può considerare una delle due opzioni. Il primo è chiamato alternativamente "graceful degradation" e "progressive enhancement." Questi due termini entrambi significano che, anziché fare siti Web sembrano identici in tutti i browser, si dovrebbe solo concentrarsi su come mantenere il sito Web utilizzabile in tutti i browser. In molte situazioni, sarà tuttavia necessario per creare siti Web che sembrano identici in tutti i browser. In tal caso, avvolgono i commenti condizionali file CSS specifico di Internet Explorer e creare non-CSS3 per i menu. Sarà inoltre necessario creare grafica appropriata per ricreare effetti di CSS3.

JavaScript per i menu

Una volta un menu in HTML di codice e uno stile nel CSS, è possibile manipolare ulteriormente con JavaScript. Ad esempio, molti "plugin" script scritto in jQuery - un framework JavaScript spesso utilizzato per animare gli elementi sulle pagine Web..--esistono che aggiungere gli effetti sia eleganti e indietro compatibilità a discesa o "suckerfish" stile menu. Il fatto che gli utenti possono disattivare JavaScript nel proprio browser può presentare una sfida dato che la maggior parte degli sviluppatori desidera mantenere la navigazione del sito Web utilizzabile per ogni utente.

Ibrido CSS & JavaScript menu

Durante la creazione di menu per pagine Web, è necessario creare sempre l'elenco dei link utilizzando una lista non ordinata in HTML, stile menu tanto quanto è possibile in CSS e quindi utilizzare JavaScript solo se è assolutamente necessario per un'animazione o all'indietro compatibilità con Internet Explorer 6. Non è necessario JavaScript per creare menu a discesa. Cosiddetto "puro CSS" discesa soluzioni esistono che funzionano nella maggior parte dei browser.