Az oldal menüje
 
Az év weboldala - 2013


Photoshop leírások

Ikonbázis
Galéria
 

 
Címkék

A blogban leggyakrabban használt címkék

 

Neko

Vízszintes menük
Vízszintes menük : Vízszintes menü 19.

Vízszintes menü 19.


Változtatások
1. Ha több képet szeretnél használni, akkor a menükódban plusz menüt kell belemásolni és a CSS kódban is kell hozzá rendelni CSS-t.
2. Ha nagyobb vagy kisebb képeket szeretnél használni az is lehetséges.
Ezekre a változtatásokra én már nem fogok írni új kódot. Ha változtatni szeretnél valamin, akkor kísérletezz a kóddal. Az alap kód adott. A többi rajtad áll ;)

Javascript kódok
Ezeket úgy ahogy van másold ki és illeszd oldalad moduljába oda, ahol használni fogod a menüt. Semmi mást nem kell csinálni vele. A Javascript kódban soha semmin nem kell változtatni.

<script type="text/javascript" src="http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1400998806_04463.js"></script><script type="text/javascript" src="http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1400998806_02515.js"></script><script type="text/javascript" src="http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1400998805_02108.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  // find the elements to be eased and hook the hover event
  $('div.jimgMenu ul li a').hover(function() {    
    // if the element is currently being animated
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad", complete: "callback"});
    } else {
      // ease in quickly
      $(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad", complete: "callback"});
    }
  }, function () {
    // on hovering out, ease the element out
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad", complete: "callback"})
    } else {
      // ease out slowly
      $(this).stop(':animated').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad", complete: "callback"});
    }
  });
});
</script>
<script type="text/javascript">
$().ready(function() {
    $('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad', complete: 'callback'});
    });
</script>

Menü kód
Írd át az URL linkeket a sajátodra. A címeket is átírhatod, de felesleges, mert az úgy sem fog látszani a képek miatt.

<div class="jimgMenu">
  <ul>
    <li class="landscapes"><a href="http://aranymeli.gportal.hu">Landscapes</a></li>
    <li class="people"><a href="http://aranymeli.gportal.hu/gindex.php?pg=20199690">People</a></li>
    <li class="nature"><a href="http://aranymeli.gportal.hu/gindex.php?pg=19322271">Nature</a></li>
    <li class="abstract"><a href="http://aranymeli.gportal.hu/gindex.php?pg=18012139">Abstract</a></li>
    <li class="urban"><a href="http://aranymeli.gportal.hu/gindex.php?pg=24588232">Urban</a></li>
  </ul>
</div>

CSS kód
Semmi más dolgod nincsen, mint kicserélni  a képek url címét a sajátodra. Előtte persze szerkeszd meg a képedet, írd rá a szöveget és csak aztán töltsd fel a képtárba. A képek mérete 320 x 200 pixeles legyen! Ennyi. Semmi mást nem kell állítani a CSS-ben, mivel csak képekből áll úgy is.

<style type="text/css">
.jimgMenu {
    width: 600px; /* egész doboz szélessége */
    height: 200px;
    overflow: hidden;
    margin: 0px;
}

.jimgMenu ul {
    list-style: none;
    margin: 0px;
    display: block;
    height: 200px;
    width: 1340px;
    
    }

.jimgMenu ul li {
    float: left;
}

.jimgMenu ul li a {
    text-indent: -1000px;
    background:#FFFFFF none repeat scroll 0%;
    border-right: 2px solid #fff;
    cursor:pointer;
    display:block;
    overflow:hidden;
    width:78px;
    height: 200px;
}

.jimgMenu ul li.landscapes a {
    background: url(http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1400999007_02711.jpg) repeat scroll 0%;
}

.jimgMenu ul li.people a {
    background: url(http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1400999006_01378.jpg) repeat scroll 0%;
}

.jimgMenu ul li.nature a {
    background: url(http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1400999007_08097.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
    background: url(http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1400999008_07481.jpg) repeat scroll 0%;
}

.jimgMenu ul li.urban a {
    background: url(http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1400999005_05856.jpg) repeat scroll 0%;
    min-width:310px;
    
}

.clear {
    clear: both;
}
-->
</style>

Forrás: link

Még nincs hozzászólás.
Csak regisztrált felhasználók írhatnak hozzászólást.
 

Lépj be a lovak csodálatos világába! Nevelj te is nálunk! KATT KATT KATT KATT    *****    Nem lehet saját lovad? Nevelj virtuálisan ITT! Nevelj, versenyezz, licitálj szebbnél szebb lovakra!    *****    -Portálépítés és portáldíszítés kezdõknek és haladóknak! Rengetek leírás, JavaScriptek , CSS ,HTML kódok,Naptár,Design!-    *****    The Resident - A kórházi drámasorozat január 21-én indul Matt Czuchry és Emily VanCamp fõszereplésével! Nézzetek be!    *****    Mindenféle kérdésedre õszinte választ kaphatsz a valódi Kérdõasztrológia segítségével.    *****    Részletes személyiség és sors analízis / születési horoszkóp / ajándék 3 év elõrejelzéssel. Most érdemes ide látogatni!!    *****    Ha diplomás asztrológust keresel, aki BECSÜLET KASSZÁS alapon ad tanácsot és INGYEN OKTAT, akkor keress bizalommal!    *****    A BIOTÉRKÉP AZ IGAZI KARMA! MEGMUTATJA PONTOSAN,MILYEN FELADATTAL SZÜLETTÉL.EGY PRÓBÁT MEGÉR. SOK SEGÍTSÉG MINDEN NAP!!!    *****    Megnyitott a madárvendéglõ! Gyertek vendégségbe ti is Mályvához és Pipitérhez! Irány a Mesetár!    *****    Megnyitottam cikkes, véleményes blogomat! Sok-sok érdekes bejegyzéssel várlak naponta, ne hagyd ki! - Alice    *****    Sztárokról és idolokról írok,ajánlókat hozok,tippeket és tageket osztok meg veletek!Nézz be egy blogkóros lány oldalára!    *****    Az igazi karma a horoszkópodban a Felszálló holdcsomópont,a Chiron,a Lilith (Fekete Hold),Rendeld meg most!Várlak, katt!    *****    családi adókedvezmény 2018 nyomtatvány letöltés, feltételek tudnivalók    *****    Rendelj születési horoszkópot és 3 év elõrejelzés ajándékba a tiéd. Ne feledd a horoszkóp a lélek tükre,bele kell nézni!    *****    családi pótlék utalás 2018 - csp utalás - utalás idõpontja 2018 - családi pótlék kifizetések !    *****    Ismerd meg az Olicity párost! Minden a Zöld Íjász címû sikersorozat imádott szerelmespárjáról! Mindennap friss!    *****    SZEREPJÁTÉK! Ha aktív oldalon szeretnél játszani, nézz be és légy része egy egyedi történetnek! Csatlakozz!    *****    Karácsonyi képekkel vár a Mesetár! Kukkants be a két nyuszihoz és Miska macskához! Boldog ünnepeket kíván: Nyuszi Mama    *****    Kellemes Karácsonyi Ünnepet és Békés, Boldog Új Esztendõt Kívánok minden Kedves látogatómnak!    *****    Kellemes Ünnepeket kíván Neked is a Zara Larsson Magyarország! - Kellemes Ünnepeket kíván Neked is a Zara Larsson HU!