Javascript vs. Menu CSS

February 13

Javascript vs. Menu CSS


Dall'inizio di Internet, le pagine Web hanno usato i menu per la navigazione. Lontano dalle semplici liste di link orizzontali e verticali di un tempo, oggi i siti web utilizzano strutture di navigazione complesse con collegamento evidenziazione, menu a discesa, fly-out e altro ancora. La creazione di menu più complessi e interattivi richiede una combinazione di Cascading Style Sheet codice (CSS) e JavaScript. Piuttosto che pensare di JavaScript rispetto CSS, utilizzare JavaScript per integrare il codice CSS e, soprattutto, per fornire effetti speciali o massimizzare la compatibilità del browser.

CSS per i menu

Gli sviluppatori possono creare menu mozzafiato manipolando liste non ordinate con i CSS. Questa tecnica consente una grande varietà nei menu, così come gli effetti, come gli angoli arrotondati, gradienti, ombre e altro ancora. La maggior parte di questi effetti sono grazie Level CSS 3 (CSS3). Esistono alcuni problemi quando si cerca di fare questi menu funzionano con i vecchi browser che non supportano CSS3 o comprendono insetti che ostacolano la codifica CSS in generale. In particolare, quando lo styling un menu in CSS per Internet Explorer 6, non è possibile utilizzare la "hover" pseudo-classe di innescare uno stato hover per qualcosa di diverso collegamenti attuali. Questa limitazione del browser crea problemi quando i menu richiedono uno stato hover per un intero elemento della lista.

Compatibilità con il passato per i CSS

Al fine di affrontare il problema della compatibilità all'indietro quando i browser non supportano le proprietà CSS3, si può considerare una delle due opzioni. Il primo è chiamato anche "graceful degradation" e "progressive enhancement". Questi due termini sia significa che invece di creare siti web sembrano identici in tutti i browser, si dovrebbe concentrarsi solo su come mantenere il sito web utilizzabile in tutti i browser. In molte situazioni, sarà ancora bisogno per creare siti web che sembrano identici in tutti i browser. In tal caso, avvolgere i commenti condizionali intorno file CSS di Internet Explorer-specifici e creare non CSS3 per i menu. Sarà inoltre necessario per creare grafica appropriate per ricreare effetti CSS3.

JavaScript per i menu

Una volta che si codifica un menu in HTML e stile in CSS, è possibile manipolare ulteriormente con JavaScript. Ad esempio, molti script "plugin", scritto in jQuery - un quadro JavaScript spesso usato per animare gli elementi delle pagine Web - esistono che aggiungere due effetti elegante e compatibilità all'indietro a discesa o menu in stile "Suckerfish". Il fatto che gli utenti possono disattivare JavaScript nel proprio browser può presentare una sfida dal momento che la maggior parte degli sviluppatori vogliono mantenere navigazione del sito utilizzabile per ogni utente.

Hybrid CSS e JavaScript menu

Durante la creazione di menu per i Web, si dovrebbe sempre creare l'elenco dei collegamenti utilizzando una lista non ordinata in HTML, lo stile di menu per quanto è possibile in CSS e quindi utilizzare JavaScript solo se è assolutamente necessario per un'animazione o la compatibilità con Internet Explorer 6. non è necessario JavaScript per creare menu a discesa. Le cosiddette soluzioni a discesa "puro CSS" esistono che il lavoro nella maggior parte dei browser.