Az előző cikket olvasva kedvet kaptam egy kis fejlesztéshez. Sokáig gondolkodtam, hogy mit is készítsek, végül rájöttem arra, hogy általában rengeteget foglalkozom a webdesignok készítésekor a menüvel. Hát most változtattam ezen! :) Egy egyszerű, mégis látványos megoldást mutatok most be nektek!

Az első lépések

Mint mindig, most is a nagyobb részektől haladunk a kisebb részletek felé. Először létrehozunk egy CSS Div-et menu néven, a következő tulajdonságokkal: fix állapotú legyen, az oldal felső részétől 100 pixel távolságra legyen, jobbról az oldal szélétől jobbra, kb. 50 képpont távolságra legyen (tehát -50px), szélessége 48 képpont (bár ez attól függ, hogy mekkora ikonokat rakunk majd bele), magassága 340 képpont, háttérnek pedig átlátszó színt állítunk be. A rendezettebb, szebb kinézet érdekében adhatunk neki egy kis paddingot is!

#menu {
  position:fixed;
  top:100px;
  right:-50px;
  width:48px;
  height:340px;
  background:transparent;
  border-left:1px solid transparent;
  padding:10px;
 
  transition-duration:0.5s;
}
(a kód végén látható transition-duration:0.5s; sorra később szükségünk lesz, ezért írtam oda, tegyetek ti is így!)

Hogyan tovább? Azt szeretnénk, hogy mikor a kurzort a menü fölé visszük, jelenjen meg teljes egészében! Ezt úgy érjük el, hogy a menü hover állapotánál jobb oldalt pontosan az oldal széléhez tesszük a menüt:

#menu:hover {
position:fixed;
right:0;

transition-duration:0.5s;
}

Ezután készítsük el, vagy töltsük le a kívánt ikonokat (ajánlom az Iconfinder weboldalat). Én most közösségi ikonokkal dolgozom, de bármi mást bele lehet tenni a menübe! ;)

Leírjuk azokat a tulajdonságokat, melyek az összes ikonra igazak! :)

#menu .icon {
  width:48px;
  height:48px;
  margin-bottom:20px;
  opacity:0.6;
  transition-duration:0.5s;
}

Az ikonoknak is lesz hover állapotuk, így:

#menu .icon:hover {
  opacity:1;
  transition-duration:0.5s;
}

5 darab ikonunk lesz: RSS, Facebook, Twitter, Google, Email. Most kellenek a letöltött képek! CSSben mindegyikhez készítünk egy DIVet!

#menu .rss {
  background:transparent url('https://i.imgur.com/iooRSBb.png');
}

#menu .facebook {
  background:transparent url('https://i.imgur.com/q24ul0O.png');
}

#menu .twitter {
  background:transparent url('https://i.imgur.com/Cg4kzQf.png');
}

#menu .google {
  background:transparent url('https://i.imgur.com/OPYqnhX.png');
}

#menu .email {
  background:transparent url('https://i.imgur.com/aj3eNAO.png');
}

Már nincs sok hátra, be kell "szerelnünk" a weboldalunkba ezt a menüt! Egyszerű HTML az egész, így kell:

 
 
 
 
 


A végeredmény egy szép, modern közösségi menü, ami bármelyik weboldalon tökéletesen működik! Jó munkát! :)

Megtekinthető: http://codepen.io/KovJonas/pen/ghcvC