Dropdown-lista på hover css. Anpassad design för rullgardinslistor
Idag vill jag presentera ett litet "recept" för att skapa en lista i CSS. Ingen JQuery, ingen CSS3 - bara bra gammal CSS för flera webbläsare. Exemplet är ganska enkelt, så erfarna kamrater kanske inte är intresserade. Vi kommer att implementera en rullgardinslista med sociala knappar.
Så låt oss inte prata på länge, låt oss gå direkt till saken
HTML
Dela det här inlägget
- Google Plus
- I kontakt med
- RSS
Jag utelämnar medvetet allmänna punkter, som att ta med stilar, så att koden inte växer. Längst ner på sidan kommer jag att ge en länk till källorna – allt finns där.
Vad vi har i HTML - vanlig lista och en ovanlig titel. Dess ovanlighet är att den är gjord med en hyperlänk, som låter dig spåra händelsen :sväva, det vill säga vägledning. Rullgardinslistan fungerar när du håller muspekaren över titeln.
CSS
Låt oss först titta på de grundläggande stilarna i en rullgardinslista. Jag försökte kommentera varje rad med kod för att göra det tydligare:
/*Återställ utfyllnaden*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Basic wrapper*/ .droplink ( width:200px; position:absolute; margin:10px 0 0 25px ) /*Hover block style*/ .droplink:hover( height:auto; background-color:#3E403D; border:solid 1px #3A3C39 ) /*Heading in normalt tillstånd*/ .droplink h3 a( text-align:center; width:100%; display:block; padding:12px 0px; color:#999; text-decoration:none ) .droplink h3 a img(border:none) /* Hover header style*/ .droplink:hover h3 a ( color:#FFF; font-weight:bold; position:absolute )
Det finns inget speciellt här; vi angav storleken och stilen på blocket, stilen på rubriken och för båda elementen, deras stilar när vi höll markören. Varsågod:
/*Dölj listan utan att hover*/ .droplink ul( list-style:none; display:none ) /*Visa listan på hover*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li( display:block)
Den här koden är mer intressant och visar hur den beter sig rullgardinsmenyn när du håller markören. I normalt skick kostar det display:ingen, dvs den visas inte. När vi svävar, visar vi det som ett block. Det är hela hemligheten. Låt oss nu dekorera listelementen lite och infoga ikoner:
/*Listobjektstil*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px ; background-repeat:no-repeat; bakgrundsposition: 10px 3px ) /*Hover element style*/ .droplink li a:hover( background-color:#999 ) /*Icons*/ .facebook a (background-image) :url("icons/facebook.png")) .twitter a (background-image:url("icons/twitter.png")) .vk a (background-image:url("icons/vk.png")) .rss a (background-image:url("icons/rss.png")) .gplus a (background-image:url("icons/gplus.png"))
Det är allt, faktiskt. Den nedrullningsbara listan är klar och ser ganska snygg ut. Du kan designa elementen efter eget gottfinnande, lägga till rundade hörn och andra klockor och visselpipor.
Om du vill att listan ska "överlappa" texten under den när du svävar, titta åt sidan z-index.
Om något är oklart eller inte fungerar, fråga i kommentarerna eller använd knappen "Skicka meddelande", det finns där —>
Hej kära läsare av bloggsidan. Som en del av vår studie av krångligheter, som nästa uppgift, kommer vi att fortsätta att analysera detaljerna för att skapa formulär på webbplatsen med de lämpliga.
Idag ska vi titta på hur man skapar rullgardinsmeny (rullgardinsmeny) listor, inklusive flervalsalternativ, med hjälp av välj och alternativ, hur man konstruerar textfält via textarea, och prata även om möjligheten att utöka funktionaliteten i formulär genom att använda taggar fieldset, label och legend.
Låt mig påminna dig om att alla formulär som finns på sidan skapas med och är avsedda att ange all information från användaren och skicka den till servern (exempel - ).
Tyvärr språkets medel hypertextmarkering tillåter inte direkt behandling av denna information, därför med använder HTML vi bara skapar utseende blanketter och nödvändiga uppgifter skickas för behandling. För detta ändamål, målmedvetet skapat på webbservern specialfil skrivet på en av serverspråk(oftast PHP). Låt oss säga för respons du kan skapa en mail.php-fil, som kommer att vara hanteraren.
På praktisk användning information som tas emot i denna publikation, glöm inte hur det ska se ut, var koderna för alla synliga element Sidor, inklusive formulär, finns alltid i body-taggen.
Denna information är extremt nödvändig, för även om du använder alla moderna utvecklarverktyg inbyggda i dem (låt mig påminna dig om att det första tecknet i implementeringen av denna funktionalitet var), måste du tydligt förstå mekanismen för att använda huvudtaggarna, då redigering av HTML-koden, som behovet uppstår då och då, kommer att förvandlas till en trevlig aktivitet.
2. Flera olika- detta attribut, som inte har några parametrar, tillåter flera val, till skillnad från exemplet ovan, där du bara kan välja ett element (rad). Försök att markera in denna lista med musen flera rader samtidigt (en i taget var som helst, håll Ctrl-tangenten, eller genom att Shift följer i rad en efter en):
3. Storlek— ställer in höjden på listrutan, det vill säga antalet rader som visas. Om multipelattributet finns och storleksvärdet inte anges (som i exemplet ovan), då som standard visas fyra rader, och, till exempel, med size="5" kommer fem att vara synliga:
|
Alternativ Textområde Label Fältuppsättning Legend |
4. Nödvändig(har inga parametrar) – definierar att ett val måste göras innan data skickas till processorn. Om ett element från listan inte är markerat kommer formulärdata inte att skickas:
|
Alternativ Textområde Label Fältuppsättning Legend |
5. Autofokus(spelar ingen roll) - sätter fokus på listan direkt efter att sidan har laddats. Dessutom, om användaren är van vid att utföra de flesta av åtgärderna med hjälp av tangenter, kommer just ett sådant förkonfigurerat fokus att hjälpa till att göra val från listan med hjälp av pilarna på tangentbordet utan att behöva använda musen:
|
|
6. Inaktiverad(inga parametrar) - blockerar åtkomst till listan (inaktiverar den). I praktiken används det vanligtvis i kombination med skript i de fall du behöver aktivera en rullgardinslista endast när vissa villkor är uppfyllda:
7. Form— kommunicerar listan med en eller flera formulär som den tillhör, men som är placerad utanför containern
. Dessutom i betydelsens roll formattribut parametern anges globalt attribut-id som läggs till i formtaggen:|
Välj Alternativ Textområdesetikett Fältuppsättningsförklaring från listan |
Blanda inte ihop attributet select tag med huvudformtaggen. I exemplet ovan lades attributet id="data" till formtaggen och form="data" till selecttaggen, vilket gjorde det möjligt att associera rullgardinsmenyn med ett specifikt formulär.
Alternativ Tag Attribut
1. Värde— definierar värdet från rullgardinsmenyn som kommer att skickas till servern (formulärbehandlare). Faktum är att hanteraren skickas ett namn, som specificeras av namnattributet för select-taggen, och värde värde(För detta exempel— 1, 2, 3, 4, 5), motsvarande den valda raden i rullgardinsmenyn:
|
Alternativ Textområde Label Fältuppsättning Legend |
2. Inaktiverad— blockerar valet av ett listobjekt.
|
Alternativ Textområde Label Fältuppsättning Legend |
Som du kan se i exemplet är "Alternativ"-raden inaktiv och kan inte väljas.
3. Märka— visar textinnehållet (vilket är dess värde) för ett visst listelement. Om etiketten finns skrivs en rad som är identisk med värdet av detta attribut ut och textinnehållet inuti alternativtaggen ignoreras. Samma sak händer om innehållet mellan helt frånvarande.
|
Tag Textarea Tag Etikett Tagg Fältuppsättning Tag Legend |
Se. I exemplet ovan är den första raden för alternativ i koden tom (på vänstra sidan av tabellen), men parametern label="Option Tag" skrivs, som ett resultat av att denna text visas i listan (på den rätta sidan). Den andra raden med kod innehåller texten "Textarea Tag" som innehållet i alternativtaggen, men rullgardinsmenyn till höger visar ordet "Textarea" för att matcha värdet på label="Textarea".
4. Vald— väljer den aktuella listrutan:
|
Alternativ Textområde Label Fältuppsättning Legend |
Om multipelattributet finns, är det möjligt att välja mer än ett element:
|
Alternativ Textområde Label Fältuppsättning Legend |
Attribut för optgroup-taggen
Om rullgardinslistan behöver sorteras på något sätt, till exempel delas in i grupper, används en behållare för var och en av dessa grupper som består av de öppnande och avslutande optgroup-taggarna, som innehåller en del av rullgardinsposterna. Det finns dock två attribut för att sätta upp en sådan rullgardinslista.
1. Märka— ställer in namnet på varje grupp som en parameter:
|
Alternativ Textområde Label Fältuppsättning Legend |
Samma sak, men med multipla och size="7" av select-taggen:
|
Alternativ Textområde Label Fältuppsättning Legend |
2. Inaktiverad(inga värden) - blockerar urvalet av element i gruppen som den är inställd på, och inaktiva objekt markeras vanligtvis grå:
|
Alternativ Textområde Label Fältuppsättning Legend |
En kort video kommer väl till pass här:
Textfält i ett formulär med textområde
Ett annat formulärelement för webbplatsen som vi kommer att överväga är ett fält med möjlighet att skriva in flerradstext i det. Det kan skapas med textarea-taggen. Utan standardattributen ger användning av denna tagg följande resultat:
|
Skriv text: |
Du kan utföra radbrytningar i fältet, och texten kommer att överföras till processorn på servern, med hänsyn till de ändringar som gjorts. Fältet kan sträckas ut i bredd och längd genom att klicka på det nedre högra hörnet, som är markerat med två diagonala ränder.
Låt oss nu försöka lägga till flera attribut med parametrar till den ursprungliga koden:
1. namn— definierar namnet textområdet som ett värde för att identifiera den efter att ha skickat in formulärdata medan den bearbetas på servern.
2. Cols— Fältbredd, som specificeras som en parameter av antalet intilliggande identiska tecken placerade horisontellt. Standardvärdet är 20.
3. Rader— höjden på textfältet, bestäms av antalet rader. Om antalet textrader som angetts av användaren är större än värdet som anges av detta attribut, då vertikal rand skrolla.
4. Maxlängd- pekar på högsta belopp tecken som kan placeras i ett textfält. Om gränsen överskrids kommer ytterligare inmatning inte att vara möjlig.
Nedan är ett exempel med alla ovanstående attribut, effekten av var och en av dem kan du kontrollera själv genom att helt enkelt placera det nödvändiga antalet bokstäver och rader i textområdet (du kan helt enkelt skriva in samma tecken flera gånger):
|
Skriv text: |
5. Minlängd— anger det minsta antal tecken som måste anges i textområdet. Om användaren försöker skicka en text med färre tecken kommer webbläsaren att visa ett kort meddelande med information som kommer att innehålla ett omnämnande av behovet av att komplettera innehållet i formuläret och hur många tecken som redan har skrivits in.
7. Skrivskyddad(utan parametrar) - om du bifogar detta attribut till textarea kommer textfältet inte att kunna redigeras av användare och kommer att vara skrivskyddat. Men du kan fokusera på det (flytta markören till fältet och vänsterklicka), samt markera och kopiera (delvis eller helt) texten:
Några fler attribut som implementerar ytterligare funktionalitet när du fyller i fält:
8. Autoslutförande— anger om webbläsaren ska ge tips när användaren fyller i ett formulär baserat på tidigare inmatade data och ger möjlighet att automatiskt infoga lämplig text.
Har bara två parametrar: på(aktiverad) och av(avstängd). Här är ett kodexempel:
Detta attribut med värdet "on" fungerar bara när webbläsaren specifika användare Automatisk ifyllning av formulärfält är aktiverad.
9. Slå in- ställer in webbläsarreglerna för radbrytningar i textområdet med hjälp av tre värden:
Mjuk— en uppsättning tecken som inte passar in i fältet i bredd överförs automatiskt till ny linje. I det här fallet processorn texten kommer att skickas som en rad. Om användaren överför text till valfritt ställe med "Enter"-tangenten, sparas sådan överföring när webbformuläret skickas.
|
Skriv text: |
Hård— bindestreck skapas automatiskt om texten inte passar in i fältet i bredd, och när de skickas till processorn kommer platserna för sådana bindestreck att sparas. Detta alternativ används endast i tillsammans med attributet cols:
|
Skriv text: |
Av— inaktivera radbrytningar. Om du skriver ut ett textfragment utan mekanisk överföring med "Enter"-tangenten kommer hela texten att placeras på en rad, och horisontell rand skrolla:
|
Skriv text: |
10. Autofokus(har inga parametrar) - initierar fokus på textfältet när sidan laddas med formuläret.
11. Inaktiverad- till skillnad från skrivskyddsattributet (som också förbjuder redigering av innehållet i fältet, men gör det möjligt att fokusera på det), blockerar helt åtkomsten till textområdet, som vanligtvis är grått:
HTML-alternativtaggen används för att skapa en rullgardinslista som låter användaren välja ett alternativ från en fördefinierad uppsättning värden.
Text, synlig för användaren, kan skilja sig från texten som anges i värdeattributet. Så här skapar du en rullgardinslista:
- Rullgardinslistan skapas med taggen
- Inuti en tagg
- I taggen
Du kan också ställa in CSS klass istället för att använda ID för att bestämma stilen på rullgardinsmenyn.
I nästa avsnitt kommer jag att visa exempel på hur du använder rullgardinsmenyn HTML-lista i JavaScript/JQuery. Exemplen visar dig också hur du ställer in stilar
Exempel på att skapa en enkel rullgardinslista
I den HTML-exempel välj alternativet används för att skapa en rullgardinslista med tre alternativ att välja mellan:
Exemplet ovan använder följande uppmärkning för att skapa en rullgardinslista:
Använder attributet value
Som nämnts tidigare kan värdet på värdeattributet skilja sig från texten som visas på sidan. Du kan till exempel visa namn på länder eller färger för användare och använda kortkoder i värdeattributet.
I följande exempel Vi skapar en rullgardinslista med ett värdeattribut:
Se onlinedemo och kod
För tagg
Exempel på åtkomst till det valda alternativet i JavaScript
Låt oss nu skapa ett exempel på att komma åt värdet för ett valt alternativ och utföra några åtgärder. Vi skapar samma lista som i exemplet ovan med färgalternativ. När du har valt den klickar du på knappen för att tillämpa den färgen på dokumentet:
Se onlinedemo och kod
För alternativvärdet HTML används följande kod:
Följande kodrad används i JavaScript för att komma åt värdet av ett alternativs värdeattribut
var seltheme = document.getElementById(“selcolor”).value;
När knappen klickas anropas en JS-funktion, som tilldelar värdet som valts i rullgardinsmenyn till en variabel. Detta värde används för att tillämpa en färg på det aktuella dokumentet.
Åtkomst till synlig text i JQuery
Den här gången använder jag JQuery för att komma åt värdet för det valda alternativet: både texten och värdet . I den här demon kommer jag att komma åt den synliga texten i en alternativtagg i HTML:
Se onlinedemo och kod
I koden för varje alternativ i taggen
Så här får du tillgång till detta värde i HTML välj alternativ valt JavaScript:
var selectcolor = $("#jqueryselect option:selected").text();
Du kan också komma åt värdet med JQuery $.val()-metoden:
var selectcolor = $("#jqueryselect").val();
Byt ut den här raden i exemplet ovan så kommer koden att visa kortkoden/färgvärdet i värdeattributet snarare än den synliga texten.
Ett exempel på att få ett värde i ett PHP-skript
I det här exemplet på att få värdet på alternativet valt från en rullgardinslista skapas formuläret med taggen
Se onlinedemo och kod
Formmetoden som används i exemplet är POST, så du kan få formulärvärdena med PHP-array$_POST[“”] . Detta är formulärkoden som används i exemplet:
Och här är hur PHP-skriptet används för att få HTML-valvärdet:
". $_POST["selfphp"].""; } ?>
Om formuläret anger GET-metoden, använd sedan PHP-array $_GET[“”].
Styla en rullgardinslista med CSS
Låt oss nu titta på hur man definierar liststilar
Se onlinedemo och kod
Tillsammans med linjär-gradient används här egenskapen box-shadow. Den fullständiga CSS-koden ser ut så här:
Selcls ( stoppning: 3px; kant: fast 1px #517B97; kontur: 0; bakgrund: -webkit-gradient(linjär, vänster överst, vänster 25, från(#FFFFFF), color-stop(4%, #CAD9E3), till (#FFFFFF)); bakgrund: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px: rgba(0,0,0, 0.1) 0px 0px 8px; : rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
Rundade hörn med egenskapen gränsradie
För HTML-valsalternativet kommer vi att ställa in CSS3 border-radius-egenskapen för att göra rundade hörn. Färgskalan förändras också. Du kan experimentera med kanter, bredd, marginaler och andra egenskaper som du vill:
Se onlinedemo och kod
Använda flera CSS-attribut och stilar
För att tillåta användare att välja flera alternativ från en lista måste du använda multiple-attributet. I exemplet ovan kan endast ett alternativ väljas. När du använder flera kan du välja flera alternativ genom att trycka på CTRL-tangenten:
Se onlinedemo och kod
Använda Bootstrap-ramverket och plugins för att skapa vackra rullgardinslistor
Om du använder Bootstrap ramverk, då har du möjlighet att använda plugins för att skapa coola HTML-alternativ.
Ett sådant plugin är Bootstrap-Select. Det lägger till för rullgardinsmenyn användbara funktioner. Du kan till exempel söka efter ett värde genom att skriva in text i ett fält. Detta är särskilt användbart om det finns många alternativ i rullgardinsmenyn.
Dessutom är alla valda alternativ markerade med bockmarkeringar, och du kan sätta en gräns för antalet valda alternativ med hjälp av multipelattributet.
I den tillhandahållna demoversionen kan användaren välja två alternativ från en lista.
En enkel rullgardinslista i HTML är lätt att skapa med hjälp av select-taggen. Det här är en containertagg som är kapslad i den - de är de som definierar listans element.
Det finns flera alternativ för listor som kan skapas med hjälp av select-taggen: en rullgardinslista (alternativ visas efter att ha klickat på huvudfältet eller hållit muspekaren över det) och en flervalslista - där användaren kan välja flera objekt. De första är vanligare, det är de betydande inslag navigering av moderna webbplatser. En rullgardinsmeny med flera val kan användas till exempel i kataloger där du behöver välja flera egenskaper hos en produkt.
Du kan ändra utseendet och egenskaperna för listor med universella och speciella attribut.
Välj taggattribut
1. Multipel - ställer in flera val.
2. Storlek - ställer in kvantiteten synliga linjer i listan, det vill säga höjden. Och här beror allt på om multipelattributet är närvarande eller inte. Om ja, och du inte anger storlek, kommer användaren att se allt om flera är närvarande möjliga alternativ val, om flera saknas, kommer endast en rad att visas, och besökaren kan läsa resten när han klickar på hissikonen på höger sida. Om höjdstorleken är angiven och den är mindre än antalet alternativ, visas en rullningslist till höger.
3. Namn - namn. Den nedrullningsbara listan kan klara sig utan den, men det kan vara nödvändigt att interagera med hanterarprogrammet på servern. Som regel anges fortfarande namnet.
Select-taggen har inga obligatoriska attribut, till skillnad från option-taggen.
Kapslade alternativtaggattribut
- Vald - utformad för att markera ett listobjekt. Användaren kommer att kunna välja mer än ett objekt om multipelattributet är inställt (se ovan).
- Värde - värde. Det här attributet är obligatoriskt. Webbservern måste förstå vilka listobjekt användaren har valt.
- Märka. Det här attributet kan användas för att förkorta listobjekt som är för långa. Till exempel kommer "Milan" att visas på skärmen istället för "Milan är Lombardiets administrativa centrum" som anges i alternativtaggen. norra Italien". Det här attributet används också för att gruppera objekt i en lista.
När det gäller listbredden är den som standard inställd på längden på den bredaste texten i listan. Naturligtvis kan bredden ändras med HTML-stilar.
Dropdown-lista på andra sätt
Det går att göra med CSS hjälp, till exempel kommer en lista att visas när du håller muspekaren över ett sidelement. Utmärkta alternativ för att skapa listor tillhandahålls av JavaScript, vilket förenklar arbetet Jquery bibliotek. En rullgardinslista som är ansluten med det här biblioteket kan vara mycket komplex, t.ex. Det vill säga när du väljer ett element i en lista visas nästa lista, till exempel finns det ett menyalternativ " Damkläder"(när de svävar över faller de ut när du väljer en av typerna, till exempel "Ytterkläder"; en lista med element faller ut: jackor, parkas, kappor, korta rockar, pälsrockar, etc.
Vi har ytligt listat de viktigaste sätten på vilka du kan skapa en rullgardinslista. Naturligtvis finns det många nyanser i JavaScript som gör att du kan ändra funktionaliteten och utseendet på listor.