Delning är en integrerad del av webbupplevelsen och designers letar alltid efter nya och intressanta sätt att markera eller visa upp delningen av sina sidor.
Idag ska vi bygga en enkel delningsmeny som integrerar ett ikonfontsnitt samt några animeringar. Slutprodukten är inspirerad av Disqus, men har en unik vridning av sig själv. Låt oss hoppa in och se hur det fungerar.
Kolla in den slutliga demo: Klicka här
Diskussionsmeny
Idén för dagens handledning kommer från Disqus kommentarsmenyn som du ser längst ner i denna och alla andra Design Shack-artiklar. När någon lämnar en kommentar kan du dela den kommentaren via en snygg liten delningsmeny. Som standard är det helt enkelt ordet? Share ?, men när du svävar över det, flyter tre sociala ikoner ut och blir synliga. Det är en iögonfallande effekt som är väldigt enkelt att bygga så jag tyckte att det skulle vara kul att gå igenom det.
Steg 1. Ikonfontexten
För den här menyn behöver vi minst tre sociala delningsikoner. För att förhindra de skalningsproblem som du ser i Disqus-exemplet ovan vill jag att dessa ska vara vektorbaserade. För att dra av det kunde vi gå på två olika sätt. Den första är att använda SVG-grafik, vilket är tillräckligt enkelt. Kanske en ännu enklare rutt är dock helt enkelt att använda en ikon typsnitt.
Efter någon sökning hittade jag Socialico från FontFabric, som är gratis, har massor av ikoner och är licensierad för inbäddning på webbplatser.
För att se till att vi har maximal kompatibilitet för att bädda in denna typsnitt till vår sida, låt oss gå över till FontSquirrel. Den här webbplatsen tillåter oss att ladda upp en enda typsnittfil och ladda ner ett snyggt förpackat @ font-face kit komplett med alla olika filtyper och kod som vi behöver för att bädda in teckensnittet med CSS.
När du har laddat ner @ font-face-kit, ta alla de inkluderade fontfilerna och släng dem i din huvudsakliga webbplatskatalog för detta projekt. Om vi öppnar den CSS-fil som genererades hittar vi följande kod, som vi kan kopiera och klistra in i vår egen CSS.
Än så länge är allt bra! Vi har nu en fantastisk font tillgänglig för oss som kommer att bädda in oändligt skalbara sociala ikoner till vår sida. Du måste uppskatta den typen av bekvämlighet.
Steg 1. HTML
Nu är det dags att markera den här sugaren. Att göra detta är extremt lätt. Skapa först en paragraf med ett klassnamn för? Dela?, Skriv sedan? Dela? i som texten också.
Därefter lägger du till tre länkar efter? Dela? text. Jag använder versalerna F, L och S, som översätter till Facebook, Twitter och StumbleUpon i vår sociala ikon font.
Det är allt! Allt vi behöver är det här enkla markupet, vi vänder oss till CSS för alla fina saker.
Steg 2. Punkt CSS
Det första som vi kommer att behöva utforma är själva stycket. Det finns några viktiga saker att få här. Först måste vi ställa in positionen till släkting. Detta är så senare, när vi använder absolut positionering på ikonerna, kommer de att stanna i gränsen för stycket.
Därefter lägger vi till några marginaler, vadderingar, dimensioner, färg och sätter in teckensnittet. Observera att jag har gjort allt superstorlek för demoens syfte. Känn dig fri att skala ner allt detta!
Med denna bit av kod, här är vad din sida ska se ut. Observera att ikonerna just nu är bara bokstäver, det beror på att vi inte har ställt in teckensnittet för länkarna ännu. Låt oss ta hand om det där nästa.
Steg 3. Punkt CSS
Nu är det dags att koda upp de ankare taggarna. Här kommer vi att använda absolut positionering, vilket återställer positionen för dessa länkar inom gränserna för vår relativt positionerade punkt. Med absolut positionering kan vi scoot objekten på plats med topp och vänster egenskaper.
Låt oss sedan ta hand om utseendet på länkarna. Vi vill ställa in färgen, textdekorationen och teckensnittet. För teckensnittet, var noga med att du använder det sociala teckensnittet som vi skapade i steg ett.
Denna kod omvandlar våra bokstäver till de sociala ikonerna som vi letar efter. Problemet är självklart att de alla är buntade ihop på vänster sida.
I själva verket är det dock inget problem alls, det är precis vad vi vill ha. Bara på svävar vill vi sprida dem på ett trevligt animerat sätt. För tillfället måste vi dock göra dessa ikoner osynliga och lägga till en övergång så att eventuella förändringar som uppstår senare blir gradvisa.
Steg 4. Basic Hovers
Vi har ganska mycket fått utgångspunkten för vår meny, alla kodade upp. Nu behöver vi bara arbeta upp en hel röra av svävarstater för att göra allt detta arbete. Vi börjar med några grundläggande effekter.
Den första svängaren ändrar markören till pekaren trots att ordet? Delar? är inte tekniskt en länk. Den andra ger opaciteten säkerhetskopiering för våra dolda ikoner. Den tredje ändrar färgen på en ikon när användaren svänger över den.Eftersom våra ikoner är faktiskt text är det här väldigt enkelt! Detta skulle ha krävt att du flyttat runt en sprite eller ändra bakgrundsbilden om vi hade använt ett bildbaserat tillvägagångssätt.
Steg 5. Flytta ikonerna
Nästa sak som vi behöver göra är att flytta ikonerna på plats när användaren svävar över? Dela ?. För att göra detta använder vi helt enkelt vänster egendom att dämpa dem över.
Det verkliga tricket är att bestämma hur man väljer och placerar varje länk individuellt. Lyckligtvis har CSS3 en fantastisk väljare som fungerar perfekt här: nth-of-type.
Dessa är komplicerade selektörer så låt oss bryta ner dem. Den första chunken berättar webbläsaren att vi utlöser en svänghändelse för "share" klass. Använd sedan n: te-of-typ att rikta sig mot första, andra och tredje ankare, som effektivt griper alla våra ikoner.
Kompatibilitetsvarning
En sak att komma ihåg, n: te-of-typ är en nivå tre väljare, vilket innebär att du inte har tur för IE8 och tidigare. Vi kan göra en av två saker för att åtgärda detta. Om du inte har något emot JavaScript, kan du använda Selectivizr för att lägga till denna funktion tillbaka till IE6.
Om du inte vill gå JavaScript-rutten är det enda alternativet du vill lägga till extra markup. I detta scenario har varje ankare sin egen unika klass.
Nu i din CSS har du en unik krok som får dig till varje enskild ikon ganska enkelt. Denna lösning är definitivt mycket mer rotig än Selectivizr-vägen, men bristen på JavaScript är en bonus.
Steg 6. Lägg till fler effekter
Som standard glider våra ikoner till höger och blekna till existens. Om vi vill göra denna effekt lite mer spännande kan vi vända oss till CSS-omvandlingar och komma med en mängd olika resultat. Här är en massa olika alternativ att överväga, som alla kommer att visas i den slutliga demo.
Se det i aktion!
Med det är vi alla färdiga! Följ länken nedan för att se demoversidan, sväng sedan över de olika menyerna för att se frukterna av vårt arbete.
demo: Klicka här
Slutsats
Nu har du en bra animerad del meny som du kan använda för att få lite uppmärksamhet på ditt nästa projekt. Lämna en kommentar nedan och låt mig veta vad du tycker om det och hur du skulle förbättra det!