Neko

Vízszintes menük

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

Vízszintes menü 18.

Főoldal Grafika Segítségek Kódok Galéria

Leírás

Ez a menü akkor mutat a legjobban, ha a szerkeszthető fejlécbe teszed bele. Vagy is, ajánlott a kódot oda tenni!
Mivel maga a kód táblázatban van, így még több cellát is létrehozhatsz benne, ha esetleg van olyan információd, amit szeretnél mindig aktívnak tudni. A kódokat egymás alá illeszd be, úgy, ahogy itt van nálam. A CSS kódban írd át a színeket, betűtípust, stb. A képeket cseréld le a sajátodra, de nem muszáj. Okézd le és készen is vagy

Két fontos információ

A kódot én készítettem, kivéve a javascript részét, mert azt a neten találtam. De maga a menü saját!
A kód működik. Nem rossz, nincs benne semmi hiba. Ha nálad nem működik, akkor valamit elrontottál. Kihagytál egy kódrészt, vagy a CSS átírása közben történt valami baki. A lényeg, hogy ami itt van kód, az jó.

Menü kódja

<div class="nav">
   <table align="center" height="50" width="640">
       <tbody>
           <tr>
               <td align="left">
                   <a class="cssmenu" href="//aranymeli.gportal.hu">Főoldal</a> <a class="cssmenu" href="//aranymeli.gportal.hu/gindex.php?pg=19322271">Grafika</a> <a class="cssmenu" href="//aranymeli.gportal.hu/gindex.php?pg=20199690">Segítségek</a> <a class="cssmenu" href="//aranymeli.gportal.hu/gindex.php?pg=18012139">Kódok</a> <a class="cssmenu" href="http://www.linda.weboldala.net/" target="_blank">Galéria</a></td>
               <td align="center">
                   <a href="http://www.aranymeli.hu"><img alt="" src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1376229577_75.gif" style="width: 32px; height: 32px;" /></a> <a href="https://www.facebook.com/lindadesign.gportal" target="_blank"><img alt="" src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1367662327_23.png" style="width: 32px; height: 32px;" /></a></td>
           </tr>
       </tbody>
   </table>
</div>

CSS kódja

   <style type="text/css">
.nav {
   padding: 0;
   background-color: #3C3E50; /* a sáv háttérszíne */
   position: -webkit-sticky;
   z-index: 1;
        text-align: center;
   color: #fff; /* ha csak simán szöveget is írsz bele, akkor ez a szöveg színe */
}
.sticky { /* ezt NEM bántjuk! */
   position: fixed;
   width: 100%;
   left: 0;
   top: 0;
   z-index: 100;
}
a.cssmenu { /* menü kinézete */
    color: #F3F2F0 !important;
    padding: 10px;
    margin: 10px;
    font-size: 14px !important;
    font-family: georgia !important;
    background-color: transparent !important;}
a.cssmenu:hover { /* menü kinézete, ha ráviszed az egeret */
    text-decoration: underline;
}
-->   </style>

Javascipt kódok
A javascript kódokat nem kell bántani, csak úgy ahogy itt van illeszd be oda, ahol a menü is lesz!

stickyNav();
			// and run it again every time you scroll
			$(window).scroll(function() {
				stickyNav();
			});
		});
	</script><script type="text/javascript">
(function(a){a.isScrollToFixed=function(b){return a(b).data("ScrollToFixed")!==undefined};a.ScrollToFixed=function(d,g){var j=this;j.$el=a(d);j.el=d;j.$el.data("ScrollToFixed",j);var c=false;var z=j.$el;var A;var x=0;var n=0;var h=-1;var e=-1;var p=null;var u;function q(){z.trigger("preUnfixed");i();z.trigger("unfixed");e=-1;x=z.offset().top;n=z.offset().left;if(j.options.offsets){n+=(z.offset().left-z.position().left)}if(h==-1){h=n}A=z.css("position");c=true;if(j.options.bottom!=-1){z.trigger("preFixed");s();z.trigger("fixed")}}function k(){var B=j.options.limit;if(!B){return 0}if(typeof(B)==="function"){return B()}return B}function m(){return A==="fixed"}function t(){return A==="absolute"}function f(){return !(m()||t())}function s(){if(!m()){p.css({display:z.css("display"),width:z.outerWidth(true),height:z.outerHeight(true),"float":z.css("float")});z.css({width:z.width(),position:"fixed",top:j.options.bottom==-1?o():"",bottom:j.options.bottom==-1?"":j.options.bottom});A="fixed"}}function b(){z.css({width:z.width(),position:"absolute",top:k(),left:n});A="absolute"}function i(){if(!f()){e=-1;p.css("display","none");z.css({width:"",position:"",left:"",top:""});A=null}}function r(B){if(B!=e){z.css("left",n-B);e=B}}function o(){return j.options.marginTop}function v(){if(!a.isScrollToFixed(z)){return}var D=c;if(!c){q()}var B=a(window).scrollLeft();var E=a(window).scrollTop();var C=k();if(j.options.minWidth&&a(window).width()<j.options.minWidth){if(!f()||!D){l();z.trigger("preUnfixed");i();z.trigger("unfixed")}}else{if(j.options.bottom==-1){if(C>0&&E>=C-o()){if(!t()||!D){l();z.trigger("preAbsolute");b();z.trigger("unfixed")}}else{if(E>=x-o()){if(!m()||!D){l();z.trigger("preFixed");s();e=-1;z.trigger("fixed")}r(B)}else{if(!f()||!D){l();z.trigger("preUnfixed");i();z.trigger("unfixed")}}}}else{if(C>0){if(E+a(window).height()-z.outerHeight(true)>=C-o()){if(m()){l();z.trigger("preUnfixed");i();z.trigger("unfixed")}}else{if(!m()){l();z.trigger("preFixed");s()}r(B);z.trigger("fixed")}}else{r(B)}}}}function l(){var B=z.css("position");if(B=="absolute"){z.trigger("postAbsolute")}else{if(B=="fixed"){z.trigger("postFixed")}else{z.trigger("postUnfixed")}}}var w=function(B){if(z.is(":visible")){c=false;v()}};var y=function(B){v()};j.init=function(){j.options=a.extend({},a.ScrollToFixed.defaultOptions,g);if(navigator.platform==="iPad"||navigator.platform==="iPhone"||navigator.platform==="iPod"){if(!navigator.userAgent.match(/OS 5_.*\ like Mac OS X/i)){return}}j.$el.css("z-index",j.options.zIndex);p=a("<div />");A=z.css("position");if(f()){j.$el.after(p)}a(window).bind("resize.ScrollToFixed",w);a(window).bind("scroll.ScrollToFixed",y);if(j.options.preFixed){z.bind("preFixed.ScrollToFixed",j.options.preFixed)}if(j.options.postFixed){z.bind("postFixed.ScrollToFixed",j.options.postFixed)}if(j.options.preUnfixed){z.bind("preUnfixed.ScrollToFixed",j.options.preUnfixed)}if(j.options.postUnfixed){z.bind("postUnfixed.ScrollToFixed",j.options.postUnfixed)}if(j.options.preAbsolute){z.bind("preAbsolute.ScrollToFixed",j.options.preAbsolute)}if(j.options.postAbsolute){z.bind("postAbsolute.ScrollToFixed",j.options.postAbsolute)}if(j.options.fixed){z.bind("fixed.ScrollToFixed",j.options.fixed)}if(j.options.unfixed){z.bind("unfixed.ScrollToFixed",j.options.unfixed)}if(j.options.spacerClass){p.addClass(j.options.spacerClass)}z.bind("resize.ScrollToFixed",function(){p.height(z.height())});z.bind("scroll.ScrollToFixed",function(){z.trigger("preUnfixed");i();z.trigger("unfixed");v()});z.bind("remove.ScrollToFixed",function(){z.trigger("preUnfixed");i();z.trigger("unfixed");a(window).unbind("resize.ScrollToFixed",w);a(window).unbind("scroll.ScrollToFixed",y);z.unbind(".ScrollToFixed");j.$el.removeData("ScrollToFixed")});w()};j.init()};a.ScrollToFixed.defaultOptions={marginTop:0,limit:0,bottom:-1,zIndex:1000};a.fn.scrollToFixed=function(b){return this.each(function(){(new a.ScrollToFixed(this,b))})}})(jQuery);</script>

Súgó

Még nincs hozzászólás.

Frissítés

Csak regisztrált felhasználók írhatnak hozzászólást.

Oldal tetejére

Itachi Shinden második fejezet!! - ÚJ FEJEZET - Felkerült a könyv második harmada!! Konoha.hu - KATT!! KATT! KATT!! KATT ***** Pont ITT Pont MOST! Pont NEKED! Már fejlesztés alatt is szebbnél szebb képek! Ha gondolod gyere less be! ***** Kedves Csokoládé kedvelõk! Segítségeteket kérném a kérdõívem kitöltéséhez! Témája a CSOKOLÁDÉ MÁRKÁK! Köszön ***** Mindig tudnod kell, melyik kikötõ felé tartasz. - ROSE HARBOR, a mi városunk - FRPG ***** A boroszkányok gyorsan megtanulják... Minden mágia megköveteli a maga árát. De vajon mekkora lehet ez az ár? - FRPG ***** Alkosd meg a saját karaktered, és irányítsd a sorsát! Vajon képes lenne túlélni egy ilyen titkokkal teli helyen? - FRPG ***** why do all monsters come out at night - FRPG - Csatlakozz közénk! - Írj, és éld át a kalandokat! ***** Aki szörnyekkel küzd, vigyázzon, nehogy belõle is szörny váljék. S ha hosszasan tekintesz egy örvénybe, az örvény vissza ***** Rose Harbor, ahol a tenger suttog és a múlt sosem tûnik el teljesen. - FRPG - csatlakozz közénk te is :) ***** Egy kikötõ, ahol minden hullám egy új kezdetet ígér. Rose Harbor, több mint egy város, egy világ a világ mögött. ***** Rose Harbor – kisvárosi báj, nagy titkokkal - légy részese te is ennek a kalandnak :) - FRPG ***** Óceán, erdõ, csillagfény – minden ösvény Rose Harborba vezet - aktív FRPG közösség ***** Itachi Shinden 1. kötet Magyarul elérhetõ a konoha.hu -n. Nézzetek be! *** Itachi Shinden 1. kötet Magyarul elérhetõ!!! ***** ÁGICAKÖNYVTÁRA - KÖNYVEK, KÖNYVEK, KÖNYVEK - ÁGICAKÖNYVTÁRA ***** MOVIE-NIGHT -> Filmek, Sorozatok <- MOVIE-NIGHT ***** Movie- ***** Játssz a színekkel keress szebbnél szebb képeket, építs, szépítsd a portálod, hogy szebb és színesebb legyen a világod! ***** Debrecen Huszti Lakóparki napelemes családiház eladó. 06209911123 Debrecen Huszti Lakóparki napelemes családiház eladó. ***** Pont ITT Pont MOST! Pont NEKED! Már fejlesztés alatt is szebbnél színes szebb képek! Ha gondolod gyere less be! ***** Kedves Csokoládé kedvelõk! Segítségeteket kérném a kérdõívem kitöltéséhez! Témája a CSOKOLÁDÉ MÁRKÁK! Köszön