Regisztráció | Belépés
BELÉPÉS

Beszélgessünk!
HTML tanulás, weblap készítés [8]
Humor [0]
Játékleírások [5]
A "Neked Hoztam" oldal hírei [4]
Spirituális témák [0]
Minden egyéb [4]

MENÜ

KERESÉS

HONLAPJAINK

MINI CHAT
500

~ NEKED HOZTAM... ~
Főoldal | Beszélgessünk! | Flash játékok | Fotóalbum | Jigsaw Puzzle | Képgyűjtemények | Könyvek, filmek, TV-rádió | Vendégkönyv
Főoldal » Beszélgessünk! » HTML tanulás, weblap készítés » Menü készítése (css és html)

2017-12-18, 17:33 | Megtekintések: 14 | Hozzászólások: 1 | Helyezés: 0.0/0
Menü készítése (css és html)
Ebben a beszélgetésben a webes menükészítéssel foglalkozunk.



Az alábbi videóban egyszerű menü készítését ismerhetjük meg, vízszintesen vagy függőlegesen elhelyezve. A videó magyar nyelvű, részletesen elmagyarázza, hogy mit miért csinálunk. Sokat lehet tanulni belőle.

 

Ha nem akarsz css kódok írásával bíbelődni, használhatsz online menükészítő programot. Egy nagyon jó menumaker:
http://www.cssmenumaker.com/


 

Hozzászólások (1)
avatar
0
1.
Kinyíló menü

Talán emlékeztek rá, hogy korábban ez a honlap másképpen nézett ki. A színeiben hasonlított a mostanira, de az elrendezése (szerintem) zsúfoltabb volt, így kevésbé lehetett átlátni. A fotóalbumban 10-15 fejezet, a fejezetekben pedig legalább 10-20 kategória. Akkor az volt a célom, hogy az oldalsávból mindig, minden helyről el lehessen érni az összes kategóriát. Ehhez függőleges, úgynevezett "kinyíló" menüt használtam, amelynek az a lényege, hogy ha rákattintunk a menüpontra, megjelennek az almenüi (ha rákattintunk a fotóalbum valamelyik fejezetének a nevére, megjelennek az ahhoz tartozó kategóriák). Ezt a módszert már nem használom, de mivel érdekes és látványos, szeretném veletek megosztani.

A html forrásban egy tetszőleges helyen kell ezt a kódot elhelyezni:
Kód

<script type="text/javascript">
   function viewMore(div)
   {
   obj = document.getElementById(div);
   col = document.getElementById("x" + div);
    
   if (obj.style.display == "none")   
   {
   obj.style.display = "block";
   } else {
   obj.style.display = "none";
   }
   }
</script>


A szkriptet pedig valahogy így használjuk fel:
Kód

<a href="javascript:viewMore('mymenu1');" id="xmymenu1">Külső menü</a>
<div id="mymenu1" style="display:none">
   <table>
   <tr>
   <td style="width:100%" class="me3" valign="top">
   <a href="/mysite1" target="_blank" class="cn3">Belső menü 1</a>
   </td>
   </tr>
   <tr>
   <td style="width:100%" class="me3" valign="top">
   <a href="/mysite2" target="_blank" class="cn3">Belső menü 2</a>
   </td>
   </tr>
   <tr>
   <td style="width:100%" class="me3" valign="top">
   <a href="/mysite2" target="_blank" class="cn3">Belső menü 3</a>
   </td>
   </tr>
   </table>
</div>
Hozzászólásokat csak regisztrált felhasználók írhatnak.
[ Regisztráció | Belépés ]
P-Art EviaDesign | Copyright Evia © 2017 | Top100