1. Tudásbázis
  2. Sminkek
  3. Chameleon alsmink legördülő menüvel + image menü

Chameleon alsmink legördülő menüvel + image menü

Beküldte makgab - 2010. május 6. 10.11
makgab képe

Hi!

Csináltam a Chameleon (6.16) sminkből egy alsminket. Ez megy is.
Vannak elsődleges linkjeim almenükkel. Ebből csak legördülő almenüket szeretnék kialakítani + image menü (menü nevek helyett képek).

Ebből a HTMl/CSS mintából indultam ki:

<title>CSS menü</title>
<style type="text/css">
body{
       margin: 0;
       padding: 0;
       background-color: #DAE6BD;
}
 
#menu {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        top: 10px;
        width: 100%;
        float: left;
}
 
#menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        background-color: #fff;
}
 
#menu a {
        display: block;
        margin: 0;
        padding: 2px 3px;
        color: #999999;
        background: #F4F6F4;
        text-decoration: none;
        border: 1px solid #ECEEE4;
}
 
#menu a:hover {
        color: #72815F;
        background: #DAE6BD;
}
 
#menu li {
        position: relative;
        float: left;
        width: 60px;
}
 
#menu ul ul {
        position: absolute;
        left: 0px;
        display: none;
}
 
#menu ul li:hover ul{
        display: block;
}
</style>
<!--[if IE]>
 
<style type="text/css" media="screen">
 
body {
        behavior: url('csshover.htc');
} 
 
 
#menu ul li {
       width: 60px;
 }
 
 
#menu ul li a {
      height: 1%;
} 
 
</style>
 
<![endif]-->
</head><body>
<div id="menu">
    <ul>
        <li><a href="#">Első</a></li>
        <li><a href="#">Első</a>
            <ul>
                <li><a href="#">Második</a></li>
            </ul>
        </li>
        <li><a href="#">Első</a>
            <ul>
                <li><a href="#">Második</a></li>
                <li><a href="#">Második</a></li>
                <li><a href="#">Második</a></li>
            </ul>
        </li>
    </ul>
</div>
</body></html>

A sminkben a div class="navlinks" tag-ben vannak a linkek, menük.
Az ul id="navlist" class="links" tag-ben vannak az elsődleges linkek (főmenük), a ul id="subnavlist" class="links" tag-ben meg az almenük.

Ehhez szeretnék CSS-t írni egyelőre legördülő almenükkel:

.navlinks {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  top: 10px;
  width: 100%;
  float: left;
}
 
 
 
#navlist.links {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
}
 
#navlist.links a {
  display: block;
  margin: 0;
  padding: 2px 3px;
  color: #999999;
  background: #F4F6F4;
  text-decoration: none;
  border: 1px solid #ECEEE4;
}
 
#navlist.links a:hover {
  color: #72815F;
  background: #DAE6BD;
}
 
#navlist li {
  position: relative;
  float: left;
  width: 60px;
}
 
 
 
#subnavlist.links {
  position: absolute;
  left: 0px;
  display: none;
}
 
#subnavlist.links li:hover ul {
  display: block;
}

Egy kicsit belekeveredtem, mert az almenük nem jelennek meg.
Hol írtam el? :)

G.

Drupal verzió: 
6.x
Fórum: 
Sminkek
gazsesz képe

Beküldte gazsesz - 2010. május 6. 10.33

Ahogy én csinálnám meg:
nice menu modul
page.tpl.php-ben átírni a primary links részt, hogy a nice menu legyen
a nice menu beállítás
nice menu formázás

0
0

Gazsesz

makgab képe

Beküldte makgab - 2010. május 6. 10.42

A nice_menu azért nem volt jó, mert nem oda rakta a menüpontokat, ahova szeretném.
A header részbe szeretném tenni a legördülő menüket a logo és "image" alá közvetlen.

G.

0
0
gazsesz képe

Beküldte gazsesz - 2010. május 6. 11.07

Van még pár menümodul, ami ilyet tud:
suckerfish menü
dhtml menü

0
0

Gazsesz

makgab képe

Beküldte makgab - 2010. május 6. 11.38

próbáltam, de nem jók. :)
A modulhasználat fórumon már kitárgyaltuk, megbeszéltük ott, hogy css nélkül nem megy. :)

Olyan menüt szeretnék, mint a drupal.hu menüje, csak legördülő almenükkel (ill. majd + image menü).
Egy sminket kellene kialakítanom erre, csak az almenük nem mennek.
valamit elrontok...

G.

0
0
gazsesz képe

Beküldte gazsesz - 2010. május 6. 17.42

nem is azt írtam, hogy css nélkül megy
...nice menu formázás...
:)

0
0

Gazsesz

makgab képe

Beküldte makgab - 2010. május 6. 13.44

Ezzel sem gördül le az almenü:

.navlinks {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  top: 10px;
  width: 100%;
  float: left;
}
 
 
#navlist {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
}
 
#navlist a {
  display: block;
  margin: 0;
  padding: 2px 3px;
  color: #999999;
  background: #F4F6F4;
  text-decoration: none;
  border: 1px solid #ECEEE4;
}
 
#navlist a:hover {
  color: #72815F;
  background: #DAE6BD;
}
 
#navlist li {
  position: relative;
  float: left;
  width: 60px;
}
 
 
#subnavlist {
  position: absolute;
  left: 0px;
  display: none;
}
 
#subnavlist li:hover ul {
  display: block;
}

Hol hibázom el?

G.

0
0