Menu rozwijane, otwierane, wysuwane
Wygląd
Jeżeli nie odpowiada nam podstawowy wygląd menu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku menu.css należy wkleić np.:
Zaznacz kod
#menu0 {
width: 200px;
margin: 10px;
padding: 0;
}
#menu0 dt {
background-color: #888;
color: #fff;
font-weight: bold;
text-align: center;
cursor: pointer;
margin: 10px 0 0 0;
padding: 2px;
}
#menu0 dd {
background-color: #eee;
color: #000;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #888;
margin: 0;
padding: 1px 5px;
}
#menu0 dd.active {
font-weight: bold;
}
W wyróżnionych miejscach wpisano zdefiniowany uprzednio identyfikator menu. Teraz w nagłówku dokumentu (X)HTML (<head>...</head>), na którym wstawione jest menu, wystarczy wstawić odwołanie do utworzonego właśnie zewnętrznego arkusza stylów:
Zaznacz kod
<link rel="Stylesheet" type="text/css" href="menu.css" />
Przykład:
Aby uzyskać następujące wielopoziomowe menu otwierane, imitujące tradycyjne menu aplikacji:
należy użyć kodu XHTML:
Zaznacz kod
<dl id="menu0">
<dt>Kurs</dt>
<dd>
<dl>
<dt><a href="...">HTML</a></dt>
<dd>
<dl>
<dt><a href="...">Dla zielonych</a></dt>
<dd><a href="...">...</a></dd>
<dd><a href="...">...</a></dd>
</dl>
</dd>
<dd>
<dl>
<dt><a href="...">BODY i META</a></dt>
<dd><a href="...">...</a></dd>
<dd><a href="...">...</a></dd>
</dl>
</dd>
<dd>
<dl>
<dt><a href="...">Tekst</a></dt>
<dd><a href="...">...</a></dd>
<dd><a href="...">...</a></dd>
</dl>
</dd>
</dl>
</dd>
<dd>
<dl>
<dt><a href="...">CSS</a></dt>
<dd><a href="...">...</a></dd>
<dd><a href="...">...</a></dd>
</dl>
</dd>
</dl>
<script type="text/javascript">
// <![CDATA[
new Menu('menu0', 'menu0', true, false, 0, 0, -1, -1, true);
// ]]>
</script>
oraz dołączyć następujący arkusz CSS:
Zaznacz kod
.menu0, .menu0 dl {
font-size: 12px;
position: absolute;
width: 150px;
margin: 0;
padding: 0;
border-width: 1px;
border-style: solid;
border-color: #eee #aaa #aaa #eee;
}
.menu0 dt {
cursor: pointer;
margin: 0;
padding: 0;
background-color: #888;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 14px;
border-width: 1px;
border-style: solid;
border-color: #aaa #666 #666 #aaa;
padding: 4px 5px;
}
.menu0 dl dt {
background-color: #ccc;
color: #000;
text-align: left;
font-weight: normal;
font-size: 12px;
border: 0;
padding: 0;
}
.menu0 dd {
background-color: #ccc;
color: #000;
margin: 0;
padding: 0;
width: 150px;
height: 22px;
}
.menu0 dd.active {
font-weight: bold;
}
.menu0 dt a {
background: url("submenu.gif") no-repeat 140px 8px;
padding-right: 20px;
}
.menu0 a:link, .menu0 a:visited {
display: block;
color: #000;
text-decoration: none;
padding: 4px 5px;
}
.menu0 a:hover {
color: #fff;
background-color: #008;
}
.menu0 dl {
position: absolute;
border: 0;
}
.menu0 dl dd {
position: relative;
left: 151px;
bottom: 22px;
border-left: 1px solid #eee;
border-right: 1px solid #aaa;
}
Aby ustawić kolejne menu otwierane obok siebie, należy wstawić kilka osobnych bloków <dl>...</dl>, a następnie wypozycjonować je w odpowiednim miejscu względem siebie:
Kod XHTML:
Zaznacz kod
<div class="menu">
<dl id="menu1">
<dt>HTML</dt>
<dd><a href="...">...</a></dd>
<dd><a href="...">...</a></dd>
</dl>
<script type="text/javascript">
// <![CDATA[
new Menu('menu1', 'position: absolute', true, true, -1, -1, -1, -1, true);
// ]]>
</script>
<dl id="menu2">
<dt>CSS</dt>
<dd><a href="...">...</a></dd>
<dd><a href="...">...</a></dd>
</dl>
<script type="text/javascript">
// <![CDATA[
new Menu('menu2', 'position: absolute; left: 150px', true, true, -1, -1, -1, -1, true);
// ]]>
</script>
<dl id="menu3">
<dt>Skrypty</dt>
<dd><a href="...">...</a></dd>
<dd><a href="...">...</a></dd>
</dl>
<script type="text/javascript">
// <![CDATA[
new Menu('menu3', 'position: absolute; left: 300px', true, true, -1, -1, -1, -1, true);
// ]]>
</script>
</div>
Arkusz CSS:
Zaznacz kod
.menu {
position: relative;
}
.menu dl {
width: 150px;
margin: 0;
padding: 0;
border-width: 1px;
border-style: solid;
border-color: #aaa #666 #666 #aaa;
}
.menu dt {
margin: 0;
padding: 2px 5px;
cursor: pointer;
background-color: #888;
color: #fff;
font-weight: bold;
text-align: center;
}
.menu dd {
margin: 0;
padding: 2px 5px;
background-color: #ccc;
color: #000;
}
Aby połączyć dwa ostatnie przykłady, wystarczy wstawić wszystkie menu w jednym wspólnym bloku, który musi mieć nadaną pozycję relatywną, a kolejne menu powinny być osadzane następująco:
Zaznacz kod
<div class="menu">
<dl id="menu0">...</dl>
<script type="text/javascript">
// <![CDATA[
new Menu('menu0', 'menu0', true, false, 0, 0, -1, -1, true);
// ]]>
</script>
<dl id="menu1">...</dl>
<script type="text/javascript">
// <![CDATA[
new Menu('menu1', 'menu0', true, false, 0, 0, -1, -1, true);
// ]]>
</script>
<dl id="menu2">...</dl>
<script type="text/javascript">
// <![CDATA[
new Menu('menu2', 'menu0', true, false, 0, 0, -1, -1, true);
// ]]>
</script>
</div>
Arkusz stylów będzie taki sam, jak w przykładzie wielopoziomowego menu otwieranego (przedostatni powyżej), z niewielkim dodatkiem:
Zaznacz kod
.menu {
position: relative;
}
#menu1 {
left: 150px;
}
#menu2 {
left: 300px;
}
Dotacje
Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Wpłać dobrowolną dotację...
