Dynamiske menyinnstillinger. CSS-overganger for menyanimasjon
Ikke alle maler tilbyr muligheten til å bruke en innebygd dynamisk meny, når når du holder markøren over et menyelement med musepekeren, vises skjulte undermenyer med en rullegardinliste. Statiske menyer kan selvfølgelig være selvforsynt, forutsatt at strukturen på nettstedet ditt består av bare noen få seksjoner. Men dette er typisk bare for visittkortsider. Som regel har et nettsted med respekt for seg selv en ganske forgrenet struktur, som i seg selv tvinger en til å ty til rullegardinmenyer, siden bredden eller høyden på en nettside ikke er uendelig og ikke vil kunne plassere alle elementene på én linje (saken horisontal posisjon meny) eller i én kolonne (case vertikal meny). I tillegg har det blitt lagt merke til at brukere ikke respekterer menyer som har mer enn 5-10 elementer. kanskje til og med det de lette etter på nettstedet ditt. Derfor er behovet for en dynamisk meny svært seriøst motivert. Finnes spesiell utvidelse, som er installert i din Joomla og lar deg lage og designe en meny etter eget skjønn i designmodus. Men selv om du ikke trenger en dynamisk meny, en statisk er nok for deg, eller nettstedsmalen du velger allerede har en, ikke skynd deg å ignorere dette emnet. I alle fall vil det tillate deg å bedre forstå detaljene til webapplikasjoner når du selv jobber i Swmenufree-programmet.
Com_swmenufree5.2_J1.5Dette er navnet på plugin-en som vi laster ned herfra og installerer på en måte som allerede er kjent for oss på nettstedet vårt. Etter installasjonen, velg "SwMenuFree" i "Komponenter"-menyen og gå til kontrollpanelet til dette programmet. Vi har et vindu med mange innstillinger og faner "Modulalternativer", "Dimensjoner og posisjon", "Farge og bakgrunn", "Skrifter og innrykk", "Kanter og effekter". Du bør ikke bli spesielt skremt av overfloden av tilpassbare parametere, men la oss gjøre en reservasjon med en gang: arbeidet foran er kreativt.
I linjen "Modulnavn" skriver vi umiddelbart inn navnet på menyen vi skal lage. Dette navnet er viktig for systemet, og ikke for oss, fordi etter å ha opprettet en meny med dette navnet, vil du fortsatt ikke se menyen til nettstedet ditt i listen. Faktum er at vi ikke oppretter en ny meny som sådan, men konverterer innholdet i noen av de allerede opprettede til en ny, dynamisk versjon. Vi brukte navnet "Dynamic Menu" for klarhet.
I "Meny Source"-linjen velger du "Trans Menu", siden dette alternativet, av alle tre mulige, er det mest optimale for malen vår. De som ikke tror, la dem prøve resten for til slutt å være enig med vår versjon.
"Menykilde"-linjen lar oss velge fra en liste det som allerede er eksisterende meny siden vi ønsker å presentere på dynamisk visning. Egentlig er ikke valget stort, for vi har fortsatt bare én meny - Main, med systemnavnet hovedmeny. Vi velger ham fra denne listen.
I "Foreldre"-linjen lar vi verdien TOPPEN. Dette betyr at menyen vår ikke er en underordnet gren, men selv fungerer som en forelder, som er i stand til å "gyte" andre menygrener.
La oss gå ned til neste innstillingsblokk - "Alternativer for stilark". I linjen "Last inn tabell", velg "Implementer stil direkte på siden", dette vil tillate vår meny å bruke nøyaktig de designstilene som vi selv vil angi for den, og ignorere stilene som er pålagt av nettstedsmalen.
Vi skriver ikke noe i linjen "Modulklassesuffiks".
Vi ignorerer neste blokk "Cachinginnstillinger".
Blokker " Vanlige parametere modul". Sett avmerkingsboksene som vist på figuren.
Blokker "Plassering og tilgang". I linjen "Modulplassering" legger vi header1 (dette er posisjonen horisontal meny sørget for av denne malen. Forresten, vi har for øyeblikket en nettstedsøkemodul der, så du må først bytte den til en annen posisjon - banner).
Vi berører ikke andre innstillinger i denne fanen, mens vi bare har én meny på siden, de er ikke relevante, og standardverdiene som er satt i dem er ganske tilfredsstillende for oss. Men hvis du vil at hovedmenyen ikke skal vises på alle sidene på nettstedet, men bare på noen få, velger du den du trenger i blokken "Vis menymodul på sider".
Gå til neste fane - "Dimensjoner og posisjon". Her kan vi konfigurere høyden, bredden på meny- og undermenyelementer, samt måten de er plassert på siden.
"Menyposisjon og orientering"-blokk. I linjen "Meny - Justering:" settes til venstre, fordi Å justere menytekst til venstre anses som optimal. I linjen "Meny / Undermeny - Orientering:" velg horisontalt/ned/høyre (horisontalt-ned-høyre). Ikke glem å klikke på "Vis"-knappen etter hver endring du gjør i innstillingene. Deretter vil du se menyen din i et eget vindu der den fungerer og ser ut slik den vil se ut på siden etter at du har lagret resultatene. Etter å ha beundret det, kan du lukke dette vinduet.
Blokker "Menyelementstørrelser". Her er alle verdier null, noe som betyr at menyelementene er dimensjonert i henhold til størrelsen på teksten den inneholder. Dette er et veldig godt alternativ for oss, fordi... vi lager en horisontal meny, og i den, i motsetning til en vertikal, skal ikke alle elementer ha samme størrelse.
I "Meny Offsets"-blokkene toppnivå" og "Undermenyforskyvninger" kan du angi mengden forskyvning av menyelementer i forhold til hverandre. Selv om det ikke er noe særlig objektivt behov for dette.
Fanen "Farge og bakgrunn". Det er her moroa begynner. Her må vi vise maksimal kreativitet ved å designe alle elementene i menyen vår i farger som er i harmoni med bakgrunnen til nettstedsmalen. Bakgrunnen til menyelementer kan fylles med farger og bilder (tenk PowerPoint!). Dessuten har å fylle med et bilde en dominerende betydning fremfor å fylle med farger: hvis du fyller med begge alternativene, vil den resulterende fyllingen være et bilde. Siden vi ikke har noen bilder, hopper vi over "Bakgrunnsbilder"-blokken for nå. Og i blokken "Bakgrunnsfarge" begynner vi å jobbe. Rett under er det en fargevalgpalett og et hint om hvordan du gjør dette: "Velg en farge i paletten og klikk på velgeknappen ved siden av feltet du vil bruke den valgte fargen på."
Ikke glem å gå gjennom resultatene hver gang. Se selv hvilke farger du skal velge, men det ville fortsatt være bedre å klikke på "Lagre"-knappen etter å ha sett i et eget vindu og gå til hjemmeside nettsted (hvis du jobber med nettstedet i to faner - hovedsiden og administrasjonspanelet - som vi først foreslo, vil det ikke være vanskelig å bytte til den tilstøtende nettleserfanen) for å se med egne øyne hvordan den valgte fargen stemmer overens bakgrunnen til nettstedsmalen.
Men vi kan ikke bruke alle mulighetene.
Endre menystrukturenFor det første, ved å gå til hovedsiden, ser vi at vi har to hovedmenyer: den ene er den nye, som vi jobber med, og den andre er den gamle, som er på høyre side av siden. . Ikke bli overrasket om menyene ikke dupliseres; en av dem må deaktiveres, nemlig den gamle, eller rettere sagt, modulen for å vise den bør deaktiveres. Gå til "Utvidelser" - "Moduler" og deaktiver "Hovedmeny"-modulen ved å klikke på det grønne merket i linjen, gjøre det til en rød sirkel med et hvitt kryss. Vi går til fanen der hovedsiden er åpen og ser at det kun er én meny igjen.
For det andre kan vi ikke tilpasse utformingen av undermenyene, siden vi ikke har dem ennå. Derfor må vi bygge om strukturen på menyen vår slik at hovedelementene blir underelementer.
For å gjøre dette, gå til innstillingsmenyen: "Meny" - "Hovedmeny". Her er en liste over hovedmenyelementene. La oss la to av dem være hoved, og flytte resten til undermenyer. Vi må sekvensielt åpne hvert av hovedmenyelementene "dømt" til rollen som undermeny, og i linjen "Overordnet menyelement" klikker vi på elementet hvis undermeny vi lager dette elementet. Figuren viser allerede resultatet av fem påfølgende valg for hvert element (de tidligere hovedelementene "Forum", "Galleri", "Last ned", "Kategoriblogg", "Demonstrasjon", hvis overordnede element tidligere var det usynlige elementet "Topp" , har blitt "barn" » hovedelementet "Muligheter").
For bedre å forstå mekanismen til disse endringene, anbefaler jeg at du etter hver endring i statusen til et menyelement og lagrer det, går til hovedsiden, trykker på F5 og ser på resultatet. To-tre ganger tror jeg vil være nok. Du kan gå enda lenger og mer komplisere menyen, for eksempel ved å gjøre underelementet "Laster" til overordnet for de to siste elementene. Som et resultat vil vi ha et tre-nivå hierarki i menyen vår.
Antall nivåer som kan opprettes på denne måten er ikke begrenset, men det anbefales ikke å lage mer enn tre nivåer.
Nå går vi tilbake til SwMenuFree-kontrollpanelet og tilpasser de gjenværende undermenyelementene, samt skriftfargen og kantfargen i de tilsvarende blokkene med samme navn i fanen "Farge og bakgrunn". Det bør presiseres at fargen på menyen, undermenyen og fonten er satt for to alternativer: utenfor markøren og når musepekeren svever over underelementet (elementet og dets innhold). Disse fargene må selvfølgelig være forskjellige.
Fanen "Skrifter og innrykk". Her kan du velge skrifttype og innrykk fra kanten av menycellen til teksten til denne cellen. Jeg anbefaler å ikke endre noe her bortsett fra skrifttykkelsen, siden den vanlige stilen noen ganger smelter sammen med fyllbakgrunnen (i "Font Density"-blokken, velg fet skrift).
Fanen Kanter og effekter. Figuren viser våre innstillinger.
Klikk lagre. Menyen er klar. Du trenger ikke lenger å gå til SwMenuFree-kontrollpanelet, med mindre du bestemmer deg for å endre designfargen til gjeldende mal eller når du endrer sidemalen, fordi Menydesigninnstillingene lagres imidlertid ikke.
Men vi har ennå ikke vurdert muligheten for å fylle bakgrunnen med et mønster.
Fylle menybakgrunnen med et mønsterDenne metoden er mer komplisert, men designmulighetene er ubegrensede. For å lage bilder vil vi bruke GIMP (jeg husker at i leksjon 5 brukte vi det til å lage en nettsidelogo, eller rettere sagt, vi prøvde å lage den).
Vi må lage et gjennomsiktig bilde på 200 × 200 piksler. "Fil" - "Opprett".
Dialogvindusinnstillinger som på bildet. Ta nå "Rektangulært utvalg"-verktøyet (trykk på R-tasten) og tegn en utvalgsramme 100 piksler bred og 25 piksler høy på vårt gjennomsiktige bilde. I verktøylinjen, på "Størrelse"-linjen, når du beveger musen, ser du skiftende tall for høyden og bredden på det opprettede utvalget, avhengig av disse verdiene, vi retter musen i en eller annen retning til verdiene er lik henholdsvis 100 og 25 piksler. Vi bør fylle det resulterende utvalget med en mørkebrun farge ved å bruke Flat Fill-verktøyet (Shift+B) og velge ønsket farge i paletten. Paletten vises på skjermen ved å klikke på forgrunnsfargerektangelet i verktøylinjen. (Generelt har alle panelknapper verktøytips; bare hold markøren på et viktig element i panelet - et verktøytips dukker opp umiddelbart).
I paletten må du klikke markøren på riktig farge og godta valget. Deretter klikker du inne i utvalget, og det vil bli fylt med den valgte fargen.
Nå må vi velge en 3 piksler tykk stripe langs den nedre kanten av fyllingen vår. Vi gjør dette da vi nettopp valgte det første området, med fokus på tallene i verktøylinjen (i "Størrelse"-linjen). Hvis du allerede har sluppet markøren, men tallene fortsatt ikke er de samme, for eksempel mer eller mindre enn nødvendig, flytter du markøren til valggrensen. Så snart den endrer form, trykk ned venstre museknapp og dra markøren ned eller opp. Når vi slipper musen, ser vi at vi på denne måten har økt eller redusert utvalgsområdet. La oss prøve igjen, bringe utvalgsområdet til den størrelsen vi trenger. Fyll den med appelsin.
Gjør nå laget delvis gjennomsiktig: meny "Windows" - "Paneler" - "Layers". I panelet som vises ser vi rektangelet til det gjeldende laget, velg det ved å klikke og flytt glidebryteren i «Opacity»-linjen slik at verdien blir lik 80. Fyllingen vår har blitt litt gjennomsiktig. Nå fra all denne fyllingen må vi kutte ut en tynn stripe 25 piksler høy og 3 piksler bred. Vi tar "Crop"-verktøyet, og som før med utvalgsverktøyet, dekker vi ønsket rektangel, igjen med fokus på dimensjonene i panelet. Hvis vi bommer, retter vi feilen, akkurat som med utvalg når det gjelder å rette feil, dette er identiske verktøy. (For å jobbe med små objekter er det bedre å øke bildeskalaen til 200-400%. En nedtrekksliste med mulige skalastørrelser er i statuslinjen i bildevinduet, det er vanskelig å gå glipp av.) Etter nødvendige størrelser oppnådd, klikk inne i det valgte rektangelet og få vårt første ferdiglagde bilde for menyknappen. Ikke bli overrasket over at den er så liten, vil nettleseren gjenta den så mange ganger som nødvendig for å fylle hele området av knappen. Vi lagrer den i .png-format på skrivebordet under navnet a2.
Lag et nytt rektangulært bilde på 25 x 3 piksler, bare fylt med en solid brun farge, den samme som den første. Lagre den under navnet a1.png.
Gå til administrasjonspanelet for nettstedet og start SwMenuFree. Fanen "Farge og bakgrunn". Blokker "bakgrunnsbilder". Linje "Meny - bakgrunn:", knappen "Velg". Vi må nå laste opp bildene våre til nettstedet. Klikk på "Bla gjennom"-knappen i vinduet som vises. Vi viser bildet vårt a1.png på skrivebordet og klikker på Last opp-knappen. Den lastes ned til en mappe på nettstedet. For å sette den inn som bakgrunn for et menyelement, klikk direkte på bildet som er lastet opp til nettstedet og klikk OK. Vi gjør det samme, men bare i linjen "Meny - bakgrunn ved hover:" med bildet a2.png.
Hvis alt ble gjort riktig, ble resultatet en veldig original meny: i en stille tilstand er menyen monokromatisk, og når du holder markøren, vises en oransje stripe nederst på menyelementet. Når du raskt beveger musen gjennom menyen, går denne linjen raskt over hele menyen.
Kontrollspørsmål:Du har sannsynligvis sett dynamiske og animerte menyer på enkelte nettsteder som endres når du ruller nedover. Ved å minimere hovednavigasjonsmenyen gir du mer plass til innhold. I denne opplæringen vil vi forklare hvordan du kan lage en meny selv ved hjelp av HTML5, CSS3 og litt jQuery.
Hvis du ønsker et spesielt fokus på innholdet på siden, samt la deg lage en større og mer imponerende navigasjon når en bruker først besøker nettsiden, så er denne typen meny perfekt for deg. Du kan perfekt vise frem merkevaren eller logoen din, og etter en første titt på nettstedet, redusere noen elementer, slik at brukeren kan fokusere på innholdet ditt.
Det er flere måter å gjøre dette på. I denne opplæringen vil vi forklare hvordan du lager fast meny full bredde på siden, som endres i høyden sammen med logoen, og skaper en minimert versjon av originalen. Om ønskelig kan du også erstatte logoen med et annet alternativ, for eksempel initialer eller et ikon, men husk at konsistens er veldig viktig her slik at brukeren forstår hvordan elementet har endret seg og hva det er hovedmålet er fortsatt nettstednavigasjonen.
Opprette en grunnleggende struktur i HTML5
Vi starter med å lage den grunnleggende HTML-koden vi trenger. Til å begynne med holder vi oss til en veldig enkel HTML5-struktur.
Nå som vår første HTML-kode er skrevet, legger vi til koden for menyen, samt noen andre detaljer for overskriften til HTML-filen vår.
Hvordan lage en animert meny | Webdesignmagasin 
- hjem
- Artikler
- Dette er en veldig kul side!
Rull ned og se hvordan menyen endres
Alle! Vi har kommet!
I vår : Vi la til en metakode for forfatteren for å indikere skaperen av dokumentet, hvoretter vi inkluderte Eric Meyers berømte "CSS-tilbakestilling", som vil tilbakestille nesten alle elementer i HTML-filen, noe som gir deg et renere og enklere dokument å jobbe med med. Og siden vi skal bruke JQuery senere, importerer vi den via JQuery CDN på den siste linjen i hovedelementet vårt.
I taggen vår brukte vi standard HTML5-elementet. Vår vil være i full bredde på siden og vil være ansvarlig for endringer mellom store og små versjoner av menyen. Vi gir vår en klasse kalt "stor", slik at vi kan endre noen spesifikke egenskaper i CSS for å gjøre menyen vår til en mindre versjon. Dette er vår containermeny som inneholder et bilde av vår nettsidelogo og en enkel uordnet menyliste med tre lenker.
Siden vi ikke har noe innhold her, vil dette bli brukt til å strekke siden og tvinge rulling til å tre i kraft.
Og det er alt for HTML-delen. Nå må vi style elementene ved hjelp av CSS og gjøre menyen dynamisk.
Styling av menyer og sider
/* Importer Amaranth-fonten */ @import url(//fonts.googleapis.com/css?family=Amaranth); /* Hovedstil */ body( bakgrunnsfarge: #ebebeb; ) ul( float: høyre; ) li( display: inline; float: left;) img.logo(float: left;) /* Menystørrelse og sentrering * / nav( bredde: 960px; margin: 0 auto;)
Litt av denne CSS-en vil gjøre menyen vår 960px bred i midten, mens menyen vår organiseres til høyre og logoen til venstre. Vi vil også importere Amaranth-fonten fra Google Web Fonts for å bruke for teksten vår på siden.
Section.stretch( float: left; height: 1500px; width: 100%; ) section.stretch p( font-family: "Amaranth", sans-serif; font-size: 30px; color: #969696; text-align: senter; posisjon: relativ; margin-top: 250px;
Her strekker vi ganske enkelt siden for å oppmuntre til rulling, og plasserer teksten for å indikere starten og slutten av innholdet.
Overskrift( bakgrunn: #C7C7C7; kant-bunn: 1px solid #aaaaaa; flyte: venstre; bredde: 100%; posisjon: fast; z-indeks: 10; ) overskrift a( farge: #969696; tekstdekorasjon: ingen; font-family: "Amaranth", sans-serif: store bokstaver: 1em ) header a.active, header a:hover( color: #3d3d3d; ) header li( margin-right: 30px; ) /* Dimensjoner for en større meny */ header.large( høyde: 120px; ) header.large img( width: 489px; høyde: 113px; ) header.large li( margin-top: 45px; )
Det er her vi avslutter den grunnleggende stylingen av headeren vår. vil fungere som vår menybeholder. Det vil inneholde elementet vårt og vil fungere som elementet der vi definerer bakgrunnsfargen, menyhøyden, lenkemenystilen og mer. Den vil tilpasse seg skjermbredden med breddeegenskaper: 100 % og vil forbli fast på tvers av andre elementer på nettstedet. Det er viktig å huske å sette z-indeksen slik at elementet overlapper resten av siden, samt position:fixed for å gjøre div-en forankret på toppen slik at den forblir i samme posisjon mens brukeren ruller gjennom nettsiden. Som du kan se, i tillegg til å angi stiler for overskriftene, stiller vi også noen spesifikke stiler for "large"-klassen ved å bruke header.large. Den opprinnelige tilstanden til menyen vår vil være stor, og derfor definerer vi kun de nødvendige stilene her for å få den til å se ut slik vi vil ha den når brukeren først går inn på siden.
Dynamisk menyendre størrelse
Menyen vår er ferdig og stylet, men vi ønsker fortsatt å jobbe med å holde den minimal. For å lage denne "tilstanden", vil vi opprette en ny klasse i CSS kalt "small" som vil være ansvarlig for å endre egenskapene vi må endre. Vi har allerede definert en stor meny, så nå må vi bare gjøre menyen vår kortere, bildet vårt mindre proporsjonalt, og (margin toppen) vi bruker i elementene våre
/* Størrelser for den mindre menyen */ header.small( høyde: 50px; ) header.small img( width: 287px; høyde: 69px; margin-top: -10px; ) header.small li( margin-top: 17px; )
Så som du kan se, er disse stilene nesten identiske med de i den større menyen, vi endret bare klassen "stor" til "liten" og endret verdiene vi brukte til mindre. Vi bruker negative margtopper på bildet for å sentralisere det i beholderen siden bildet har en tynn skygge og er høyere enn skriften for å romme det. Nå har vi alle nødvendige stiler for å tilpasse størrelsesmenyen, og hvis du prøver å endre den i , vil du se i nettleseren at menyen blir mindre. Men vi trenger at det er dynamisk.
Endre en menyklasse ved hjelp av jQuery
Med all stylingen vår på plass, trenger vi bare å legge til litt JavaScript for å bytte mellom "store" og "små" klassene. Siden vi ønsker å endre dette basert på brukerrulling, vil vi bruke funksjonen .ScrollTop() i jQuery. Denne funksjonen lar oss få eller angi rulleposisjonen i piksler. Rulleposisjonen er antall piksler som allerede har blitt rullet i nettleservinduet. I dette tilfellet trenger vi bare å vite hvor mange piksler brukeren rullet slik at vi kan ringe koden vår og bytte mellom klasser:
$(document).on("scroll",function())( if($(document).scrollTop()>100)( $("header").removeClass("large").addClass("small") ; ) else( $("header").removeClass("small").addClass("large"); ) ));
Hvis brukeren har rullet mer enn 100 piksler, vil den "store" klassen vi opprettet bli fjernet og vår nye "lille" klasse vil bli lagt til. På denne måten vil menyen endre størrelsen slik vi tidligere definerte i CSS. Prøv det, det burde virke nå, men du har kanskje lagt merke til at overgangene mellom klassene virker veldig brå.
CSS-overganger for menyanimasjon
For å enkelt bytte mellom klasser i menyen vår, vil vi bruke CSS-overganger. Bare bruk denne kodebiten ved siden av resten av CSS-en din.
Header,nav, a, img, li( transition: all 1s; -moz-transition: all 1s; /* Firefox 4 */ -webkit-transition: all 1s; /* Safari and Chrome */ -o-transition: all 1s; /* Opera */ )
Her har vi definert overganger for alle CSS-egenskaper for. Og
Har du noen gang hørt påstanden om at "du kan ikke lage en dynamisk rullegardinmeny med bare CSS i IE"? Det er jeg sikker på. Så, tror du egentlig på dette? Det er riktig, bedre å ikke tro det.
Målet vi ønsker å oppnå i denne artikkelen
Målet med denne artikkelen er å lage en rullegardinmeny for IE laget utelukkende i CSS. Fra og med denne innstillingen utvidet jeg oppgaven for å få en slik meny til å fungere i andre mest kjente nettlesere (fra kommentarene viser det seg at disse nettleserne er Opera 7.x og de nyeste versjonene av Firefox).
Målet som vi ønsker å oppnå i denne artikkelen er i prinsippet mer eller mindre allmenndannende, d.v.s. gi en generell idé om noen av de "skjulte" og sjelden brukte funksjonene i nettlesere.
Dessuten kan de som er spesielt nysgjerrige finne noen triks i denne artikkelen som du kan oppnå visse ikke-standardiserte resultater med. Vel, for utviklere kan denne artikkelen bli en grunn til ettertanke eller en kilde til nye ideer.
Hvordan forestiller vi oss nivået til leseren?
Jeg tenkte faktisk på å merke denne artikkelen som "avansert". Men jeg er sikker på at selv ikke de mest erfarne utviklerne vil forstå godt hva som står i artikkelen. Kort sagt, leseren må ganske enkelt kjenne det grunnleggende om CSS og
HTML.
Hvordan er denne menyen forskjellig fra alle andre?
Jeg brukte lang tid på å lete på nettet etter menyer som ble laget i CSS, men jeg fant ikke en eneste løsning som ville fungere uten feil i IE. Jeg fant imidlertid mange interessante ideer som førte meg til resultatet som skal beskrives her. Ja, koden min er heller ikke perfekt, men jeg har rett og slett ikke tid til å fikse alle feilene. Den mest interessante alternative løsningen jeg har sett (som bruker CSS) er basert på å bruke hover-pseudoklassen for LI-elementer. Men jeg trodde aldri at dette var mulig, og jeg trodde heller ikke at det var mulig å lage en rullegardinmeny for IE uten skript...
Hovedforskjellen mellom mine og andre menyer er at mine kjører i IE. Alle løsningene jeg har sett bruker LI-elementet som hovedelementet for :hover-pseudoklassen, men Microsoft har bestemt at denne pseudoklassen kun kan brukes til
element A. De fleste nettsteder gjør en ansvarsfraskrivelse om at menyene deres bare fungerer i Opera 7.x eller Mozilla nettlesere. Men disse nettleserne brukes av bare fem prosent av brukerne! Ja, slike menyer er gode i disse nettleserne, men de kan dessverre ikke være synlige i de fleste av de vanligste nettleserne. Nå skal vi rette opp denne misforståelsen.
Hva er en meny laget med bare CSS?
Dette er en dynamisk meny, som er opprettet med kun CSS, og ingen skript (for eksempel skrevet i JavaScript) brukes.
Hva, du kan ikke tro det?
La oss se på koden:
<
STYLE type
=
text
/
css id
=
"default"
title
=
"misligholde"
name
=
"default"
>
*::- moz - any - link br ,*:- moz - any - link br (
/*en løsning for mozilla*/
display: ingen;
}
div #meny * (
markør: peker; /*fordi IE viser tekstmarkøren
hvis lenken er inaktiv*/
}
Funksjonshemmet (
fargen rød ! viktig;
bakgrunn: ingen! viktig;
}
Div #meny (
bakgrunn: #F5F5DC;
høyde: 15px;
white-space: nowrap;
bredde: 100 %;
}
Div #meny .a (
bakgrunn: #F5F5DC;
kantlinje : 1px solid #F5F5DC;
farge : #000000;
tekst - dekorasjon : ingen ;
}
Div #menu .a tabell (
display: blokk;
font: 10px Verdana, sans-serif;
white-space: nowrap;
}
Div #menytabell, div#menytabell a (
display: ingen;
}
Div #menu .a:hover, div#menu div.menuitem:hover (
bakgrunn : #7DA6EE;
kantlinje: 1px solid #000080;
farge : #0000FF;
marg - høyre:- 1px; /* løser et problem med Opera
viser ikke høyre kantlinje*/
}
Div #menu .a:hovertabell, div#menu div.menuitem:hovertabell(
bakgrunn : #FFFFFF;
kantlinje : 1px solid #708090;
display: blokk;
posisjon: absolutt;
white-space: nowrap;
}
Div #menu .a:hovertabell a, div#menu div.menuitem:hovertabell a (
kantlinje - venstre : 10px solid #708090;
kantlinje-høyre: 1px solid hvit; /*løser et hoppproblem*/
farge : #000000;
display: blokk;
polstring: 1px 12px;
tekst - dekorasjon : ingen ;
white-space: nowrap;
z-indeks: 1000;
}
Div #menu .a:hovertabell a:hover, div#menu div.menuitem:hovertabell a:hover (
bakgrunn : #7DA6EE;
kantlinje: 1px solid #000000;
kantlinje - venstre : 10px solid #000000;
farge : #000000;
display: blokk;
polstring: 0px 12px;
tekst - dekorasjon : ingen ;
z-indeks: 1000;
}
Td(
border-width: 0px;
polstring: 0px 0px 0px 0px;
}
menuitem (
flyte: venstre;
margin: 1px 1px 1px 1px;
polstring: 1px 1px 1px 1px;
}
Menyem*(
polstring: 0px 0px 0px 0px;
}
#annet (
}
#moz(
}
#moz::-moz-cell-content(
høyde: auto; synlighet: synlig;
}
#other::-moz-cell-content(
høyde: 1px; synlighet: skjult;
}
#holder (
bredde: 100 %;
}
<
TABLE id
=
holder
>
<
TR
>
<
TD id
=
"other"
>
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>Fil<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>Klikk på meg
<
TR
>
<
TD
><
a href
=
#3>Lagre
<
TR
>
<
TD
><
a href
=
#4>Lukk
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>Hjelp<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Indeks
<
TR
>
<
TD
><
a href
=
"#14"
>Om
<
TR
>
<
TD id
=
"moz"
>Mozilla-spesifikk meny!
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>Filezilla
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>Åpen
<
TR
>
<
TD
><
a href
=
#3>Lagre
<
TR
>
<
TD
><
a href
=
#4>Lukk
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>Helpzilla
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Indeks
<
TR
>
<
TD
><
a href
=
"#14"
>Om
<
BR
>
Hva skjer, hvorfor fungerer alt?
La meg ta en reservasjon med en gang at i denne artikkelen vil jeg ikke lære deg hvordan du bruker CSS. Derfor, la oss umiddelbart gå videre for å vurdere prinsippet for drift av menyen - til pseudoklassen ":hover". Ja, dette er akkurat klassen. De. en velger kan arve en annen velger som inkluderer ":hover". I vårt tilfelle velger "A:hover TABLE" "
