Witam
chcę zrobić menu po kliknięciu na którym rozwinie się podmenu,
ale nie wiem jak.
Proszę o pomoc
Pełna wersja: [HTML][CSS] Rozwijane menu
Masz linka z odpowiedzią na to pytanie:
http://www.kurshtml.boo.pl/skrypty/menu_rozwijane.html
http://www.kurshtml.boo.pl/skrypty/menu_rozwijane.html
Wielkie dzięki
Witam wstawiłem ten kod według wskazówek, ale niestety nie wyświetla mi się prawidłowo.
Powinno być kilka linków obok siebie i tylko jeden w środku powinien się rozwijać.
Po umieszczeniu tego link się rozwija ale niestety przesuwa ine linki znajdujące się za nim i psuje układ strony.
Oto kod:
Proszę o pomoc w naprawie tego lub ewentualnie o pomysł na zrobienie tego innym sposobem.
Dziękuję
Witam wstawiłem ten kod według wskazówek, ale niestety nie wyświetla mi się prawidłowo.
Powinno być kilka linków obok siebie i tylko jeden w środku powinien się rozwijać.
Po umieszczeniu tego link się rozwija ale niestety przesuwa ine linki znajdujące się za nim i psuje układ strony.
Oto kod:
Proszę o pomoc w naprawie tego lub ewentualnie o pomysł na zrobienie tego innym sposobem.
Dziękuję
http://www.cssplay.co.uk/menus/ znajdziesz cos dla siebie
Witam
Skorzystałem z pomocy i zrobiłem to za pomocą:
http://www.alistapart.com/articles/dropdowns/
" target="_blank">
http://www.alistapart.com/articles/dropdowns/
Wszystko działa dokładnie tak jak chcę ale problemem jest że w IE
nic się nie rozwija (są tylko nagłówki).
Czy można coś z tym zrobić??
Skorzystałem z pomocy i zrobiłem to za pomocą:
http://www.alistapart.com/articles/dropdowns/
" target="_blank">
http://www.alistapart.com/articles/dropdowns/
Wszystko działa dokładnie tak jak chcę ale problemem jest że w IE
nic się nie rozwija (są tylko nagłówki).
Czy można coś z tym zrobić??
Kod menu rozwijanego z kursu na stronie: http://www.kurshtml.boo.pl/skrypty/menu_rozwijane.html jest moim skromnym zdaniem najlepszy. Nawet w starych przeglądarkach wszystko śmiga.
W Twoim przypadku problem z wyżej wymienionym menu polega na tym, że błędnie zapakowałeś go w kod.
Powinno być:
W Twoim przypadku problem z wyżej wymienionym menu polega na tym, że błędnie zapakowałeś go w kod.
Powinno być:
Kod
<dl id="menu0">
<dt><a href="index.php">Home</a></dt>
<dt><a href="aboutme.php">About me</a></dt>
<dt>Gallery</dt>
<dd><a href="gallery.php">Element 1.1</a></dd>
<dd><a href="gallery.php">Element 1.2</a></dd>
<dd><a href="gallery.php">Element 1.3</a></dd>
<dt><a href="contact.php">Contact</a></dt>
</dl>
<script type=\"text/javascript\">
// <![CDATA[
new Menu('menu0', '', false, true);
// ]]>
</script>
<dt><a href="index.php">Home</a></dt>
<dt><a href="aboutme.php">About me</a></dt>
<dt>Gallery</dt>
<dd><a href="gallery.php">Element 1.1</a></dd>
<dd><a href="gallery.php">Element 1.2</a></dd>
<dd><a href="gallery.php">Element 1.3</a></dd>
<dt><a href="contact.php">Contact</a></dt>
</dl>
<script type=\"text/javascript\">
// <![CDATA[
new Menu('menu0', '', false, true);
// ]]>
</script>
Zrobiłem dokładnie tak jak powiedziałeś i wyświetlają mi się wszystkie elementy jeden pod drugim
a chcę żeby się wyświetlały obok siebie.
a chcę żeby się wyświetlały obok siebie.
Żeby poszczególne elementy były obok siebie trzeba odpowiednio zmodyfikować kod CSS.
Podam Ci gotowe rozwiązanie, ale oparte o listę <ul>,<li>.
Kiedyś zrobiłem takie menu dla potrzeb jednego z projektów.
Oto kod:
- CSS:
- HTML:
- JS (dla starszych przeglądarek typu mIsiE):
Podam Ci gotowe rozwiązanie, ale oparte o listę <ul>,<li>.
Kiedyś zrobiłem takie menu dla potrzeb jednego z projektów.
Oto kod:
- CSS:
Kod
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
text-align: left;
z-index: 1;
}
#nav a {
display: block;
width: 8em !important;
width: 9em;
}
#nav li {
float: left;
width: 10em !important;
width: 9em;
}
#nav li ul {
position: absolute;
background: #000;
width: 17em;
left: -999em;
}
#nav li ul a {
display: block;
width: 16em !important;
width: 17em;
}
#nav li ul ul {
margin: -1em 0 0 10em;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
text-align: left;
z-index: 1;
}
#nav a {
display: block;
width: 8em !important;
width: 9em;
}
#nav li {
float: left;
width: 10em !important;
width: 9em;
}
#nav li ul {
position: absolute;
background: #000;
width: 17em;
left: -999em;
}
#nav li ul a {
display: block;
width: 16em !important;
width: 17em;
}
#nav li ul ul {
margin: -1em 0 0 10em;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}
- HTML:
Kod
<ul id="nav">
<li><a href="admin.php">Galeria zdjęć</a>
<ul>
<li><a href="?galeria=1">Referencje</a></li>
</ul>
</li>
<li><a href="admin.php">Podstrony</a>
<ul>
<li><a href="?go=menulist">Pokaż podstrony</a></li>
<li><a href="?go=textadd">Dodaj podstronę</a></li>
</ul>
</li>
<li><a href="admin.php">Kategorie / podkategorie</a>
<ul>
<li><a href="?go=katlist">Pokaż kategorie</a></li>
<li><a href="?go=addkatform">Dodaj kategorię</a></li>
</ul>
</li>
</ul>
<li><a href="admin.php">Galeria zdjęć</a>
<ul>
<li><a href="?galeria=1">Referencje</a></li>
</ul>
</li>
<li><a href="admin.php">Podstrony</a>
<ul>
<li><a href="?go=menulist">Pokaż podstrony</a></li>
<li><a href="?go=textadd">Dodaj podstronę</a></li>
</ul>
</li>
<li><a href="admin.php">Kategorie / podkategorie</a>
<ul>
<li><a href="?go=katlist">Pokaż kategorie</a></li>
<li><a href="?go=addkatform">Dodaj kategorię</a></li>
</ul>
</li>
</ul>
- JS (dla starszych przeglądarek typu mIsiE):
Kod
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Dzięki za kod.
Mam pytanie odnosnie JS ponieważ ja programuje w php i nie wiem zawiele o JS.
Gdzie umieścić ten kod JS?
Jak i gdzie go wywołać?
Dzieki za pomoc
Mam pytanie odnosnie JS ponieważ ja programuje w php i nie wiem zawiele o JS.
Gdzie umieścić ten kod JS?
Jak i gdzie go wywołać?
Dzieki za pomoc
Aby nie wprowadzać bałaganu zrób to w ten sposób:
stwórz sobie plik o nazwie np.: topmenu.js i wrzuć tam odpowiednią funkcję, która Ci podałem (czyli sfHover = function()). W dokumencie (X)HTML zaś wpisz pomiędzy znacznikami <head></head>:
Oczywiście ścieżkę dostępu do pliku możesz sobie dowolnie zmienić. To tyle. Have fun!
stwórz sobie plik o nazwie np.: topmenu.js i wrzuć tam odpowiednią funkcję, która Ci podałem (czyli sfHover = function()). W dokumencie (X)HTML zaś wpisz pomiędzy znacznikami <head></head>:
Kod
<script type="text/javascript" src="topmenu.js"></script>
Oczywiście ścieżkę dostępu do pliku możesz sobie dowolnie zmienić. To tyle. Have fun!
Ok wszystko działa wyświetla jedno obok drugiego tylko ja umieszczam to w sekcji div nagłówek
a pojawia mi się to w sekcji div poniżej.
W nagłówku posiadam logo jpg sformatowane jako float: left.
Czy to może być przyczyną
a pojawia mi się to w sekcji div poniżej.
W nagłówku posiadam logo jpg sformatowane jako float: left.
Czy to może być przyczyną
To menu daj do nowego div'a i nadaj mu atrybut float: right oraz odpowiednią długość. Powinno to załatwić sprawę. O ile dobrze Cię zrozumiałem.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.