ugrás a tartalomhoz

Legördülő menü beállítás

kalikim · 2010. Feb. 18. (Cs), 15.12
Sziasztok!

Meglévő honlapomon szeretném lecserélni a menüsort. Találtam egy menü scriptet, de van vele egy kis problémám. Alapvetően a honlapom 1280x1024-es felbontásra van optimalizálva. Ebben a felbontásban minden rendben van a menüvel. Viszont gondolnom kell azokra is, akik esetleg alacsonyabb felbontásban neteznek, ezért kipróbáltam, hogy 1024x768-ban hogy néz ki. Sajnos kissebb felbontásban megtörik a menü. Az lenne a kérdésem, hogy mit kell átállítanom a CSS fájlban ahhoz, hogy ne törjön meg az tt látható a menü.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>Snowman</title>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />  
  6.     <style>  
  7.         body { font-family:Arial; font-size:16px; font-weight:bold; text-align:center; margin:0px 0px;}  
  8.         /* menu */  
  9.         #menu{ margin:0px 10px; padding:0px; list-style:none; color:#fff; line-height:30px; display:inline-block; float:left; z-index:1000; position:relative;}  
  10.         #menu a { color:#fff; text-decoration:none; }  
  11.         #menu > li {background:#000000 none repeat scroll 0 0; cursor:pointer; float:left; position:relative; padding:0px 51px;}  
  12.         #menu > li a:hover {color:#B0D730;}  
  13.         #menu .logo {background:transparent; padding:0px;}  
  14.         /* sub-menus*/  
  15.         #menu ul { padding:0px; margin:0px; display:block; display:inline;}  
  16.         #menu li ul { position:absolute; left:-20px; top:0px; margin-top:30px; width:150px; line-height:15px; background-color:#000000; /* for IE */ display:none; }  
  17.         #menu li:hover ul { display:block;}  
  18.         #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px;  border-top: dotted 2px #606060; list-style-type:none; }  
  19.         #menu li ul li:first-child { border-top: none;}  
  20.         #menu li ul li a { display:block; color:#0395CC;}  
  21.         #menu li ul li a:hover { color:#7FCDFE;}  
  22.         /* corners*/  
  23.         #menu .corner_inset_left { position:absolute; top:0px; left:-12px;}  
  24.         #menu .corner_inset_right { position:absolute; top:0px; left:150px;}  
  25.         #menu .last { background:transparent; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}  
  26.         #menu .corner_left { position:absolute; left:0px; top:0px;}  
  27.         #menu .corner_right { position:absolute; left:131px; top:0px;}  
  28.         #menu .middle { position:absolute; left:18px; height: 17px; width: 115px; top:0px;}  
  29.     </style>  
  30. </head>  
  31. <body>  
  32.         <ul id="menu">  
  33.             <li class="logo"><img style="float:left;" alt="" src="menu/menu_left.PNG"/></li>  
  34.             <li><a href="#">Help</a>  
  35.                 <ul id="help">  
  36.                     <li>  
  37.   
  38.                         <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>  
  39.                         <a href="#">Snowboard kölcsönzés</a>  
  40.                         <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>  
  41.                     </li>  
  42.                     <li><a href="#">Posts</a></li>  
  43.                     <li><a href="#">Pages</a></li>  
  44.                     <li class="last">  
  45.   
  46.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  47.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  48.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  49.                     </li>  
  50.                 </ul>  
  51.              </li>  
  52.              <li><a href="#">Help</a>  
  53.                 <ul id="help">  
  54.                     <li>  
  55.   
  56.                         <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>  
  57.                         <a href="#">General help</a>  
  58.                         <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>  
  59.                     </li>  
  60.                     <li><a href="#">Posts</a></li>  
  61.                     <li><a href="#">Pages</a></li>  
  62.                     <li class="last">  
  63.   
  64.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  65.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  66.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  67.                     </li>  
  68.                 </ul>  
  69.              </li>  
  70.              <li><a href="#">Help</a>  
  71.                 <ul id="help">  
  72.                     <li>  
  73.   
  74.                         <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>  
  75.                         <a href="#">General help</a>  
  76.                         <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>  
  77.                     </li>  
  78.                     <li><a href="#">Posts</a></li>  
  79.                     <li><a href="#">Pages</a></li>  
  80.                     <li class="last">  
  81.   
  82.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  83.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  84.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  85.                     </li>  
  86.                 </ul>  
  87.              </li>  
  88.              <li><a href="#">Help</a>  
  89.                 <ul id="help">  
  90.                     <li>  
  91.   
  92.                         <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>  
  93.                         <a href="#">General help</a>  
  94.                         <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>  
  95.                     </li>  
  96.                     <li><a href="#">Posts</a></li>  
  97.                     <li><a href="#">Pages</a></li>  
  98.                     <li class="last">  
  99.   
  100.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  101.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  102.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  103.                     </li>  
  104.                 </ul>  
  105.              </li>  
  106.              <li><a href="#">Help</a>  
  107.                 <ul id="help">  
  108.                     <li>  
  109.   
  110.                         <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>  
  111.                         <a href="#">General help</a>  
  112.                         <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>  
  113.                     </li>  
  114.                     <li><a href="#">Posts</a></li>  
  115.                     <li><a href="#">Pages</a></li>  
  116.                     <li class="last">  
  117.   
  118.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  119.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  120.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  121.                     </li>  
  122.                 </ul>  
  123.              </li>  
  124.              <li><a href="#">Help</a>  
  125.                 <ul id="help">  
  126.                     <li>  
  127.   
  128.                         <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>  
  129.                         <a href="#">General help</a>  
  130.                         <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>  
  131.                     </li>  
  132.                     <li><a href="#">Posts</a></li>  
  133.                     <li><a href="#">Pages</a></li>  
  134.                     <li class="last">  
  135.   
  136.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  137.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  138.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  139.                     </li>  
  140.                 </ul>  
  141.             </li>  
  142.              <li><a href="#">Help</a>  
  143.                 <ul id="help">  
  144.                     <li>  
  145.   
  146.                         <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>  
  147.                         <a href="#">General help</a>  
  148.                         <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>  
  149.                     </li>  
  150.                     <li><a href="#">Posts</a></li>  
  151.                     <li><a href="#">Pages</a></li>  
  152.                     <li class="last">  
  153.   
  154.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  155.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  156.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  157.                     </li>  
  158.                 </ul>  
  159.              </li>  
  160.              <li><a href="#">Help</a>  
  161.                 <ul id="help">  
  162.                     <li>  
  163.   
  164.                         <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>  
  165.                         <a href="#">General help</a>  
  166.                         <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>  
  167.                     </li>  
  168.                     <li><a href="#">Posts</a></li>  
  169.                     <li><a href="#">Pages</a></li>  
  170.                     <li class="last">  
  171.   
  172.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  173.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  174.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  175.                     </li>  
  176.                 </ul>  
  177.              </li>  
  178.              <li class="logo"><img style="float:left;" alt="" src="menu/menu_right.PNG"/></li>  
  179.              </ul>  
  180. </body>  
  181. </html>  
A választ előre is nagyon köszönöm.
‹ Legördülő menü képekkel Szervernév lekérdezése ›
 ■
1

#menu > li

tiku I tikaszvince · 2010. Feb. 18. (Cs), 15.50
#menu > li padding értékéből végy vissza.
Ebből a HTML szerkezetből az jön le nekem, hogy
a) úgy vadásztad össze ennek a menünek minden elemét, amivel nem is lesz semmi baj, ha érteni is fogod, hogy mi mit csinál, mit miért írtál le (ha nem így lenne, akkor bocsi a feltételezésért, a b. pont lép életbe).

b) táblázatos oldalszerkezeten szocializálódtál (vagy aki az eredetit készítette): első és utolsó li>img elemekből gondolom, a rossz emlékezetű spacer.gif korszakot idézi fel bennem.
Ezzel a módszerrel mindössze annyi a baj, hogy pár éve már létezik az ilyen design elemek elhelyezésére CSS megoldás.

Első lépésben távolítsd el az első és utolsó csak a képet tartalmazó LI elemeket, majd burkold be az #menu ul elemet egy div-be (legyen pl '<div id="menu-cover">)
  1. #menu-cover {  
  2. background: url(menu/menu_left.PNG) no-repeat bottom left;  
  3. padding-left: 30px;  
  4. }  
  5. #menu {  
  6. background: url(menu/menu_right.PNG) no-repeat bottom right;  
  7. padding-right: 30px;  
  8. }  
Ennek előnye, hogy a HTML szerkezetedet nem kell terhelned felesleges elemekkel.

A CSS3 border-radius tulajdonságát most direkt nem hoztam fel.
2

Valamit elrontottam...

kalikim · 2010. Feb. 18. (Cs), 16.32
Először is nagyon köszönöm a gyors választ. Ha visszaveszek a padding értékből, akkor nem ér végig a lapon. Igazából azt szeretném, hogy mindig 1250 px hosszúságú legyen a menü.
Az az igazság, hogy megcsináltan, amit írtál, de valószínűleg valamit elrontottam, mivel a bal oldali kép nem jelenik meg, csak a jobb oldali. Meg tudnád nézni? Előre is köszönöm.
  1. <style>  
  2.         body { font-family:Arial; font-size:16px; font-weight:bold; text-align:center; margin:0px 0px;}  
  3.         /* menu */  
  4.         #menu{ margin:0px 15px; padding:0px; list-style:none; color:#fff; line-height:30px; display:inline-block; float:left; z-index:1000; position:relative;}  
  5.         #menu a { color:#fff; text-decoration:none; }  
  6.         #menu > li {background:#000000 none repeat scroll 0 0; cursor:pointer; float:left; position:relative; padding:0px 50px;}  
  7.         #menu > li a:hover {color:#B0D730;}  
  8.         #menu .logo {background:transparent; padding:0px;}  
  9.         /* sub-menus*/  
  10.         #menu ul { padding:0px; margin:0px; display:block; display:inline;}  
  11.         #menu li ul { position:absolute; left:-10px; top:0px; margin-top:30px; width:150px; line-height:15px; background-color:#000000; /* for IE */ display:none; }  
  12.         #menu li:hover ul { display:block;}  
  13.         #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px;  border-top: dotted 2px #606060; list-style-type:none; }  
  14.         #menu li ul li:first-child { border-top: none;}  
  15.         #menu li ul li a { display:block; color:#0395CC;}  
  16.         #menu li ul li a:hover { color:#7FCDFE;}  
  17.         /* corners*/  
  18.         #menu .corner_inset_left { position:absolute; top:0px; left:-15px;}  
  19.         #menu .corner_inset_right { position:absolute; top:0px; left:150px;}  
  20.         #menu .last { background:transparent; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}  
  21.         #menu .corner_left { position:absolute; left:0px; top:0px;}  
  22.         #menu .corner_right { position:absolute; left:135px; top:0px;}  
  23.         #menu .middle { position:absolute; left:15px; height: 15px; width: 120px; top:0px;}  
  24.       
  25.         #menu-cover {    
  26.         background: url(menu/menu_left.PNG) no-repeat bottom left;    
  27.         padding-left: 30px;  
  28.         }    
  29.         #menu {     
  30.         background: url(menu/menu_right.PNG) no-repeat bottom right;    
  31.         padding-right: 30px;    
  32.         }  
  33.           
  34.     </style>  
  35. </head>  
  36. <body>  
  37.         <div id="menu-cover">  
  38.         <ul id="menu">  
  39.             <li><a href="#">Help</a>  
  40.                 <ul id="help">  
  41.                     <li>  
  42.   
  43.                         <img class="corner_inset_left" alt="" src="menu/corner_inset_left.png"/>  
  44.                         <a href="#">Snowboard kölcsönzés</a>  
  45.                         <img class="corner_inset_right" alt="" src="menu/corner_inset_right.png"/>  
  46.                     </li>  
  47.                     <li><a href="#">Posts</a></li>  
  48.                     <li><a href="#">Pages</a></li>  
  49.                     <li class="last">  
  50.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  51.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  52.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  53.                     </li>  
  54.                 </ul>  
  55.              </li>  
  56.              <li><a href="#">Help</a>  
  57.                 <ul id="help">  
  58.                     <li>  
  59.   
  60.                         <img class="corner_inset_left" alt="" src="menu/corner_inset_left.png"/>  
  61.                         <a href="#">General help</a>  
  62.                         <img class="corner_inset_right" alt="" src="menu/corner_inset_right.png"/>  
  63.                     </li>  
  64.                     <li><a href="#">Posts</a></li>  
  65.                     <li><a href="#">Pages</a></li>  
  66.                     <li class="last">  
  67.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  68.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  69.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  70.                     </li>  
  71.                 </ul>  
  72.              </li>  
  73.              <li><a href="#">Help</a>  
  74.                 <ul id="help">  
  75.                     <li>  
  76.   
  77.                         <img class="corner_inset_left" alt="" src="menu/corner_inset_left.png"/>  
  78.                         <a href="#">General help</a>  
  79.                         <img class="corner_inset_right" alt="" src="menu/corner_inset_right.png"/>  
  80.                     </li>  
  81.                     <li><a href="#">Posts</a></li>  
  82.                     <li><a href="#">Pages</a></li>  
  83.                     <li class="last">  
  84.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  85.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  86.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  87.                     </li>  
  88.                 </ul>  
  89.              </li>  
  90.              <li><a href="#">Help</a>  
  91.                 <ul id="help">  
  92.                     <li>  
  93.   
  94.                         <img class="corner_inset_left" alt="" src="menu/corner_inset_left.png"/>  
  95.                         <a href="#">General help</a>  
  96.                         <img class="corner_inset_right" alt="" src="menu/corner_inset_right.png"/>  
  97.                     </li>  
  98.                     <li><a href="#">Posts</a></li>  
  99.                     <li><a href="#">Pages</a></li>  
  100.                     <li class="last">  
  101.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  102.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  103.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  104.                     </li>  
  105.                 </ul>  
  106.              </li>  
  107.              <li><a href="#">Help</a>  
  108.                 <ul id="help">  
  109.                     <li>  
  110.   
  111.                         <img class="corner_inset_left" alt="" src="menu/corner_inset_left.png"/>  
  112.                         <a href="#">General help</a>  
  113.                         <img class="corner_inset_right" alt="" src="menu/corner_inset_right.png"/>  
  114.                     </li>  
  115.                     <li><a href="#">Posts</a></li>  
  116.                     <li><a href="#">Pages</a></li>  
  117.                     <li class="last">  
  118.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  119.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  120.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  121.                     </li>  
  122.                 </ul>  
  123.              </li>  
  124.              <li><a href="#">Help</a>  
  125.                 <ul id="help">  
  126.                     <li>  
  127.                         <img class="corner_inset_left" alt="" src="menu/corner_inset_left.png"/>  
  128.                         <a href="#">General help</a>  
  129.                         <img class="corner_inset_right" alt="" src="menu/corner_inset_right.png"/>  
  130.                     </li>  
  131.                     <li><a href="#">Posts</a></li>  
  132.                     <li><a href="#">Pages</a></li>  
  133.                     <li class="last">  
  134.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  135.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  136.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  137.                     </li>  
  138.                 </ul>  
  139.             </li>  
  140.              <li><a href="#">Help</a>  
  141.                 <ul id="help">  
  142.                     <li>  
  143.   
  144.                         <img class="corner_inset_left" alt="" src="menu/corner_inset_left.png"/>  
  145.                         <a href="#">General help</a>  
  146.                         <img class="corner_inset_right" alt="" src="menu/corner_inset_right.png"/>  
  147.                     </li>  
  148.                     <li><a href="#">Posts</a></li>  
  149.                     <li><a href="#">Pages</a></li>  
  150.                     <li class="last">  
  151.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  152.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  153.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  154.                     </li>  
  155.                 </ul>  
  156.              </li>  
  157.              <li><a href="#">Help</a>  
  158.                 <ul id="help">  
  159.                     <li>  
  160.   
  161.                         <img class="corner_inset_left" alt="" src="menu/corner_inset_left.png"/>  
  162.                         <a href="#">General help</a>  
  163.                         <img class="corner_inset_right" alt="" src="menu/corner_inset_right.png"/>  
  164.                     </li>  
  165.                     <li><a href="#">Posts</a></li>  
  166.                     <li><a href="#">Pages</a></li>  
  167.                     <li class="last">  
  168.                         <img class="corner_left" alt="" src="menu/corner_left.PNG"/>  
  169.                         <img class="middle" alt="" src="menu/dot.PNG"/>  
  170.                         <img class="corner_right" alt="" src="menu/corner_right.PNG"/>  
  171.                     </li>  
  172.                 </ul>  
  173.              </li>  
  174.              </ul>  
  175.              </div>  
  176. </body>  
  177. </html>  
3

mi is a cél?

tiku I tikaszvince · 2010. Feb. 18. (Cs), 17.05
tisztáznod kellene először magadban, hogy pontosan mi is a cél. Ha azt szeretnéd, hogy a fekete sáv a menü "mögött", 1250px széles legyen, akkor álltsd be rá width: 1250px; szabályt. Egy elem szélességét nem mindig jó a gyermek elemeinek a szélességével meghatározni. Most ügyesen kiszámoltad hogy 50px jobb/bal paddinggal kiadja a 1250px szélességet. De mi történik, ha lecseréled a "Help" szöveget valós értékekre? Szerintem változni fog a szöveg hossza, és ehhez a változott szöveghosszhoz adódik a 2x50px. Amiből következik, hogy változni fog a teljes szélesség is.
  1. #menu-cover {  
  2.   /* a bal alsó kerekített sarok mindig a bal alsó sarokban 
  3.     jelenjen meg */  
  4.   background: url(menu/menu_left.PNG) no-repeat bottom left;  
  5.   /* ne kerülhessen a lekerekítésre semmilyen elem */  
  6.   padding-left: 30px;  
  7.   
  8.   /* ez azért kell, hogy doboz magasságát a #menu határozza meg */  
  9.   float:left; width:100%;  
  10. }      
  11. #menu {  
  12.  /* a jobb alsó kerekített sarok mindig a jobb alsó sarokban 
  13.     jelenjen meg */  
  14.   background: url(menu/menu_right.PNG) no-repeat bottom right;      
  15.   /* ne kerülhessen a lekerekítésre semmilyen elem */  
  16.   padding-right: 30px;  
  17. }   
A korábban említett felesleges html és spacer.gif dolog az almenükre is vonatkozott.
4

A cél!

kalikim · 2010. Feb. 19. (P), 10.19
Teljesen igazad van, nem határoztam meg, hogy mit is szeretnék csinálni. Az az igazság, hogy amikor megtaláltam ezt a menüt, akkor még azt gondoltam, hogy néhány dolgot módosítok benne és már be is tudom illeszteni a honlapomba, de úgy látom, ez nem is olyan egyszerű mint ahogy azt én elsőre gondoltam. Ezért kérlek, hogy segíts nekem összehozni az elejétől a végéig.
Tehát a cél valami hasonló megjelenés mint eddig, továbbá:
-1280x1024-es felbontásra szeretném optimalizálni a honlapom, azt szeretném, hogy a menü 5-5 pixel-re legyen a két szélétől a lapnak,
-a menüsor magassága 30 pixel legyen, az almenü magasságát nem nagyon tudom (maximum 3 link kerül majd ezekbe),
-ahogy eddig is volt, azt szeretném, hogy a két végén alul le legyen kerekítve, nem tudom, hogy megoldható-e ezekkel a scriptekkel: moz-border-radius webkit-border-radius,
-a menüpontok alá kerüljenek az almenüpontok, ha lehetséges középre igazítva, valahogy így.

Előre is köszönöm a segítséget!