 |
»
CSS drop down menü lazım
|
| ://www Web tasarımı ve internet ile ilgili olarak karşılaştığınız problemleri ve merak ettiklerinizi burada tartışabilirsiniz. |
 |
|
|
LinkBack | Seçenekler |
03.12.2007
|
#1 (permalink) | |
Üyelik Tarihi: 04.12.2006
Yer: Londra
Yaş: 37
Mesaj: 558
|
CSS drop down menü lazım
Merhaba, JavaScript kullanmayan saf CSS bir drop down menu istiyorum. Bu sayfada istediğim gibi bir tane buldum ancak sitenin sahibi gerekli CSS kodunu göstermek yerine "kaynak koduna bakın orada bulursunuz" diyor. Baktıkça daha çok kafam karıştı. Bu menü için hangi kodu nereye (head, body?) koymalıyım? http://www.cssplay.co.uk/menus/final_drop.html Anasayfada en altta şöyle bir açıklama var: Alıntı:
|
|
|
         
|
|
03.12.2007
|
#2 (permalink) |
|
Re: CSS drop down menü lazım
Kodlar asagidaki sekilde Erdinc. Daha önce bu menüyü kullanmak istedigimi hatirliyorum. Ama o kadar karmasik gelmisti ki, sonuda js ile bir dropdown kullanmaya karar vermistim
 CSS dosyan icerisinde HTML Code:
#info {position:relative;}
p.bold {padding-left:15px; color:#c00;}
a.linkup {position:relative;}
a.buttonup {position:absolute; top:200px; left:650px; border:0;}
a.buttonup img {border:0;}
.gleft {float:left; margin:25px 0 10px 0;}
.gright {float:right; margin:25px 5px 10px 0;}
.grc {margin:20px 0 0 10px;}
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)HTML
is available at http://www.cssplay.co.uk/menus/final_drop.HTML
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)HTML may be modified in any
way to fit your requirements.
=================================================================== */
.menu {width:745px; height:32px; font-size:0.85em; position:relative; z-index:100;border-right:1px solid #000;}
/* hack to correct IE5.5 faulty box model */
* HTML .menu {width:746px; w\idth:745px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:149px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:149px;position:relative;}
/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:11px;text-decoration:none; color:#fff; width:138px; height:30px; border:1px solid #000; border-width:1px 0 1px 1px; background:#758279; padding-left:10px; line-height:29px;}
/* a hack so that IE5.5 faulty box model is corrected */
* HTML .menu a, * HTML .menu a:visited {width:149px; w\idth:138px;}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
/* style the second level hover */
.menu ul ul a.drop:hover{background:#c9ba65 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
.menu ul ul :hover > a.drop {background:#c9ba65 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}
/* style the third level hover */
.menu ul ul ul a:hover {background:#b2ab9b;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}
/* another hack for IE5.5 */
* HTML .menu ul ul {top:30px;t\op:31px;}
/* position the third level flyout menu */
.menu ul ul ul{left:149px; top:-1px; width:149px;}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-149px;}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#d4d8bd; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}
/* yet another hack for IE5.5 */
* HTML .menu ul ul a, * HTML .menu ul ul a:visited {width:150px;w\idth:128px;}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#fff; background:#949e7c;}
.menu :hover > a, .menu ul ul :hover > a {color:#fff;background:#949e7c;}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}
HTML Code:
<div class="menu"> <ul> <li><a href="menu/index.HTML">DEMOS<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="menu/zero_dollars.HTML" title="The zero dollar ads page">zero dollars advertising page</a></li> <li><a href="menu/embed.HTML" title="Wrapping text around images">wrapping text around images</a></li> <li><a href="menu/form.HTML" title="Styling forms">styled form</a></li> <li><a href="menu/nodots.HTML" title="Removing active/focus borders">active focus</a></li> <li><a class="drop" href="menu/hover_click.HTML" title="Hover/click with no active/focus borders">hover/click with no borders<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="menu/form.HTML" title="Styling forms">styled form</a></li> <li><a href="menu/nodots.HTML" title="Removing active/focus borders">removing active/focus borders</a></li> <li><a href="menu/hover_click.HTML" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="drop" href="menu/shadow_boxing.HTML" title="Multi-position drop shadow">shadow boxing<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="menu/form.HTML" title="Styling forms">styled form</a></li> <li><a href="menu/nodots.HTML" title="Removing active/focus borders">removing active/focus borders</a></li> <li><a href="menu/hover_click.HTML" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="drop" href="menu/old_master.HTML" title="image Map for detailed information">image map for detailed information<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="menu/form.HTML" title="Styling forms">styled form</a></li> <li><a href="menu/nodots.HTML" title="Removing active/focus borders">removing active/focus borders</a></li> <li><a href="menu/hover_click.HTML" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="menu/bodies.HTML" title="fun with background images">fun with background images</a></li> <li><a href="menu/fade_scroll.HTML" title="fade-out scrolling">fade scrolling</a></li> <li><a href="menu/em_images.HTML" title="em size images compared">em image sizes compared</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="boxes/index.HTML">BOXES<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.HTML" title="a coded list of spies">a coded list of spies</a></li> <li><a href="vertical.HTML" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.HTML" title="an enlarging unordered list">enlarging unordered list</a></li> <li><a href="enlarge.HTML" title="an unordered list with link images">link images</a></li> <li><a href="cross.HTML" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.HTML" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.HTML" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="mozilla/index.HTML">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="mozilla/dropdown.HTML" title="A drop down menu">drop down menu</a></li> <li><a href="mozilla/cascade.HTML" title="A cascading menu">cascading menu</a></li> <li><a href="mozilla/content.HTML" title="Using content:">content:</a></li> <li><a href="mozilla/moxbox.HTML" title=":hover applied to a div">mozzie box</a></li> <li><a href="mozilla/rainbow.HTML" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li> <li><a href="mozilla/snooker.HTML" title="Snooker cue">a snooker cue using border art</a></li> <li><a href="mozilla/target.HTML" title="Target Practise">target practise</a></li> <li><a href="mozilla/splittext.HTML" title="Two tone headings">two tone headings</a></li> <li><a href="mozilla/shadow_text.HTML" title="Shadow text">shadow text</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="index.HTML">Explorer</a></li> <li><a href="opacity/index.HTML">OPACITY<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="opacity/colours.HTML" title="colour wheel">a colour wheel using opaque colours</a></li> <li><a href="opacity/picturemenu.HTML" title="a menu using opacity">a menu using opacity</a></li> <li><a href="opacity/png.HTML" title="partial opacity">partial opacity</a></li> <li><a href="opacity/png2.HTML" title="partial opacity II">partial opacity II</a></li> <li><a class="drop" href="menu/hover_click.HTML" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="left"> <li><a href="menu/form.HTML" title="Styling forms">styled form</a></li> <li><a href="menu/nodots.HTML" title="Removing active/focus borders">removing active/focus borders</a></li> <li><a href="menu/hover_click.HTML" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> |
|
|
|
|
03.12.2007
|
#3 (permalink) |
|
Üyelik Tarihi: 04.12.2006
Yer: Londra
Yaş: 37
Mesaj: 558
|
Re: CSS drop down menü lazım
Teşekkürler metsatöll yardımın için.
Şu an menüyü hem harici CSS hem de dahili CSS kodu ile çalıştırmayı başardım. Bu sayfada gerekli bilgiler var. Harici CSS doyası kullanırken body tagları içine yerleştirilen koda bir satırlık bir ekleme yapmak gerekiyor. CSS dosyasının nerede olduğunu ve isminin ne olduğunu belirtmek gerekiyor. Bu CSS menü konusunu halledebilirsem benim için web tasarımı konularında epey büyük bir aşama olacak. Şu an karşılaştığım dört sorun var. Belki CSS konusunu iyi bilen biri yardımcı olabilir. 1. Menü sol tarafa hizalanmış durumda ancak ben sayfanın ortasına olsun istiyorum. Bunu nasıl yaparım? 2. Menü genişliği 745 px olarak girilmiş. Ben genişliği yüzde olarak, örneğin sayfanın %80'i olarak değiştirmek istiyorum. Bunu nasıl yaparım? Kodun içinde IE 5 uyumsuzluğunu gidermek için bazı satırlar var ki bunlar genişliği kolayca değiştirmeyi engelliyor gibi görünüyor. 3. Aşağı doğru açılan bir menü başlığına mouse over yapınca düzgün bir şekilde aşağı doğru açılıyor. sorun şu ki menü başlığına tıklayınca karışıklık oluyor. Menü başlıkları tıklanılabilir olmasın istiyorum. Örneğin bu menüde DEMOS, BOXES, MOZILLA yazan yerlere tıklama imkanı olmasın istiyorum. Linkleri kaldırınca bu sefer background renkleri de kayboluyor. Menü başlıklarındaki linkleri nasıl sorunsuz bir şekilde iptal edebilirim? 4. Bu menüyü web sitesinin her sayfasında kullanacağım ancak menüde değişiklik yapacağım zaman sayfaların hepsini teker teker değiştirmek istemiyorum. Bunun için Dreamweaver ile template oluşturup editable region tanımlamak dışında başka seçenek var mı? Bu yöntem içime sinmiyor. Frontpage ile çalışırken daha rahat ediyorum. Frontpage'te şu şekilde bir çözüm buldum: Sadece menüyü içeren ve başka bir şey içermeyen bir HTML sayfası yaratıyorum. Bu sayfayı diğer bütün sayfalarda included content olarak içeriyorum. Yalnız bu yöntem CSS menüde işe yaramadı çünkü menü çalışmıyor. Sıralı liste olarak gözüküyor. |
|
|
|
|
04.12.2007
|
#4 (permalink) |
|
Üyelik Tarihi: 04.12.2006
Yer: Londra
Yaş: 37
Mesaj: 558
|
Re: CSS drop down menü lazım
Selamlar Tekrar,
Menü problemini kendi başıma çözdüm üstelik CSS'ten vazgeçmeden. Bunun için yine aynı sitedeki şu menüden faydalandım. İşin ilginç yanı bu menü yukarıda bahsettiğim menüye göre daha profesyonel ve gelişmiş bir menü olmasına rağmen copyright haklarında daha esnek ve uygulanması daha basit. Professional drop-down #6 olarak bahsedilen bu menü cssplay.co.uk sitesinin şu an kendi kullandığı menünün aynısı. Copyright konusunda tam bir esneklik var diyebiliriz. Hem kişisel hem ticari kullanıma izin veriyor. Sayfayı açınca bir zip dosyası göreceksiniz. Onu indirin. Zip dosyasının içinde bir klasör ve bir de HTML dosyası var. Klasörü aynen olduğu gibi ana dizine taşıyın. HTML dosyasını silmeyin. Bu menüyü uygulamanın en kolay yolu o HTML üzerinde değişiklik yaparak oluyor. Ana menü ve alt menü isimlerini kolayca değiştirdikten sonra dilerseniz klasörün içindeki gif dosyalarıyla oynayıp renkleri de değiştirmek mümkün. Menü maddeleri sola yanaşık ancak bu sorun değil çünkü menü çubuğunun sağ tarafı sayfayı tamamlayacak şekilde uzuyor. Menüyü sayfaya uyguladıktan sonra sayfayı tam ekrandan alıp küçültünce menü parçalara kırılıyor ancak bu da sorun değil çünkü yeterli genişlikte bir header resmi kullanınca bu sorun ortadan kalkıyor. Yukarıda bahsettiğim sonuncu problemi çözmek için Dreamweaver'da template kullanmaya karar verdim. İdare edeceğiz artık o şekilde. Şu an geri kalan tek sorunum sayfada kullandığım tablolardan kurtulmak. Kullandığım yöntem çok basit. Tek sütun ve 4 satırlık %85 genişliğinde ortaya hizalı bir tablo yaratıyorum. En üst satıra header resmi (875 px genişliğinde), ikinci satıra menü, üçüncü satıra içerik (editable region) ve sonuncu satıra footer geliyor. Bu sistem gayet düzgün çalışıyor ancak tablolardan kurtarıp sadece CSS'e geçmek lazım. |
|
|
|
| Sponsorlu Bağlantılar | |
|
Zoque.Forum
Reklam
|
|
Zoque'a hoşgeldiniz!
Zoque RSS Aboneliği
