Css Menu Problemi

24-02-2010, 20:16:56

#1

~~sdelta~~

Üyeliği durduruldu

Merhaba,

Aşağıdaki dosyada verdiğim css/xhtml menude en fazla yan yana 4 kategori açabiliyorum. Yani bir kateori açıyorum onun içinden bi kategori daha gibi 4 tane ilerletebiliyorum. Ne yaptıysam 5 olmuyor, 5 olacak şekilde lazım bana.

Yardımcı olursanız sevinirim.

http://www.auradizayn.com/cssmenuhorizontal3.zip

24-02-2010, 20:55:06

css i bu şekilde değişmen yeterli olacaktır...

/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px; /*For KHTML*/
  list-style: none;
}

ul#navmenu li {
  display: block !important; /*For GOOD browsers*/
  display: inline; /*For IE*/
  position: relative;
}

/* Root Menu */
ul#navmenu a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  display: block;
  background: #EEE;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 100%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul,
ul#navmenu ul ul ul ul{
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li:hover ul ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul,
ul#navmenu li.iehover ul ul ul ul{
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu ul ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul,
ul#navmenu ul ul ul li.iehover ul {
  display: block;
}

daha çok için 6 7 8 gibi

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul,
ul#navmenu ul ul ul ul{
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li:hover ul ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul,
ul#navmenu li.iehover ul ul ul ul{
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu ul ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul,
ul#navmenu ul ul ul li.iehover ul {
  display: block;
}

bu kısımlarda oynama yapman gerekiyor...
ul ul ul... diye ekleyeceksin işte. Eğer css bilgin varsa zaten anlarsın karşılaştırarak ve bu işini görecektirde. Yoksa jquery ya da moo ya da benzer frameworklerden yararlanabilirsin. Onların eklentileri daha basit oluyor ve kullanışlı oluyor...

Kolay gelsin

24-02-2010, 22:57:44

~~sdelta~~

Üyeliği durduruldu

Kaplan adlı üyeden alıntı: mesajı görüntüle

css i bu şekilde değişmen yeterli olacaktır...

/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px; /*For KHTML*/
  list-style: none;
}

ul#navmenu li {
  display: block !important; /*For GOOD browsers*/
  display: inline; /*For IE*/
  position: relative;
}

/* Root Menu */
ul#navmenu a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  display: block;
  background: #EEE;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 100%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul,
ul#navmenu ul ul ul ul{
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li:hover ul ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul,
ul#navmenu li.iehover ul ul ul ul{
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu ul ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul,
ul#navmenu ul ul ul li.iehover ul {
  display: block;
}

daha çok için 6 7 8 gibi

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul,
ul#navmenu ul ul ul ul{
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li:hover ul ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul,
ul#navmenu li.iehover ul ul ul ul{
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu ul ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul,
ul#navmenu ul ul ul li.iehover ul {
  display: block;
}

Teşekkürler,

Test edeceğim birazdan siz test ettiniz mi ? Çünkü denedim 4 tane açıyordu en fazla ne yaparsam yapayım 5. yi açmıyor da ?

24-02-2010, 23:19:02

Kaplan

Bu kodlar ff de 5. alt menü olarak açıldı ve çalıştı bakmadım diğer tarayıcılara.
learn>firefox>lightfx2>qdt>son menü

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu - Vertical</title>
<style type="text/css">
<!--
@import"cssmenuhorizontal.css";
-->

body {
margin: 0;
padding: 30px;
background: #FFF;
color: #666;
}

h1 {
font: bold 16px Arial, Helvetica, sans-serif;
}

p {
font: 11px Arial, Helvetica, sans-serif;
}

a {
color: #900;
text-decoration: none;
}

a:hover {
background: #900;
color: #FFF;
}
</style>
<!--[if gte IE 5.5]>
<script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
<![endif]-->
</head>
<body>
<h1>CSS Menu - Vertical</h1>
<ul id="navmenu">
  <li><a href="#">Blog</a></li>

  <li><a href="#">Work +</a>
    <ul>
      <li><a href="#">Websites +</a>
        <ul>
	        <li><a href="#">qrayg</a></li>
          <li><a href="#">qArcade</a></li>
          <li><a href="#">qLoM</a></li>

          <li><a href="#">qDT</a></li>
        </ul>
      </li>
      <li><a href="#">Pen and Ink</a></li>
      <li><a href="#">Free Interfaces</a></li>
    </ul>
  </li>

  <li><a href="#">Learn +</a>
    <ul>
      <li><a href="#">Fireworks +</a>
        <ul>
          <li><a href="#">aquaButton</a></li>
          <li><a href="#">aquaButton2</a></li>
          <li><a href="#">waterDrop</a></li>

          <li><a href="#">lightFX</a></li>
          <li><a href="#">lightFX2 ++</a>
           <ul>
	        <li><a href="#">qrayg</a></li>
          <li><a href="#">qArcade</a></li>
          <li><a href="#">qLoM</a></li>

          <li><a href="#">qDT</a>
        		 <ul>
         		 <li><a href="#">footerStick</a></li>
         		 <li><a href="#">spriteNav</a></li>
         		 <li><a href="#">@import</a></li>
      		  </ul>
        	</li>

        </ul>
          
          </li>
        </ul>
      </li>
      <li><a href="#">CSS +</a>
        <ul>
          <li><a href="#">footerStick</a></li>
          <li><a href="#">spriteNav</a></li>

          <li><a href="#">@import</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Info</a></li>
  <li><a href="#">Contact</a></li>

</ul>
</body>
</html>

25-02-2010, 00:24:06

#5

~~sdelta~~

Üyeliği durduruldu

Hallettim çok çok teşekkür ederim +rep