Podstrony
- telcocafe
- [HTML] Logowanie do ftp poprzez pole tekstowe Jak zrobić logowanie do ftp poprzez pole
- [HTML] Zła pozycja obrazka tła w tabeli Zła pozycja obrazka tła w komórce tabeli
- Darmowe statystyki odslon banera dla strony .html Czy istnieja statystyki odslona banera n
- [html] Newsy i suwak - jak to zrobić? Jak zrobić suwak?
- [html Css] Obramowanie Czcionki jak obramowac czcionke??
- [HTML] Miejsce pod formularzem Jak usunąć miejsce pod formularzem?
- [HTML] '*' == ?
- Usuwanie zbednych linijek kodu Program do usuwania linijek html
- [HTML] Formularz liczący punkty Coś w rodzaju testu liczącego punkty ;)
- [html] Polskie znaki Po wsadzeniu banera, zniknęły polskie znaki
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- asfklan.htw.pl
telcocafe
Nigdzie nie znalazłem podobnych tematów :( . Chodzi mi o rozwijane menu podobne co na stronie Kurs HTML ale, żeby było rozwijane po prawej stronie. Najlepeij podam przykład:Przed najechaniem myszki:
- link 1
- link 2
- link 3
Po najechaniu myszka na link 1:
- link 1 -> | link 4 |
- link 2 | link 5 |
- link 3 | link 6 |
... i najlepiej gdyby to było w HTML lub CSS :) Mam nadzieję o co chodzi :P Tutaj znalazłem przykładowe menu w CSS i HTML tylko bez rozwijania menu po prawej stronie <_<
Użytkownik Radziozet123 edytował ten post 26 sierpień 2006, 13:40
<script> function do_(v) { o = document.getElementById('m1').style; if (v == 's') { o.display = 'block'; } else { o.display = 'none'; } } </script> <div style="border: 2px red solid; width: 200px;float: left;" onmouseover="do_('s');">fajny tekst</div><div id="m1" style="border: 1px solid lightgreen; width: 150px; float: left; " onmouseout="do_();">menu</div>
przerób sobie. pisane na szybko, ale chodzi :P
Wystarczy odpowiednio manipulować (w CSS) :hover. ;)
Podam przykład (baardzoo ogólny):
<style> div#d_link_1 {display: none;} div#menu a#link_1:hover div#d_link_1 {display: block;} </style> <div id=menu> <a href="#" id="link_1"> <div id="d_link_1">Tu treść rozwijanego menu</div> </a> </div>
Oczywiście musisz sobie najpierw poprzesuwać odpowiednio divy ;)
Nic nie działa żaden z tych kodów :( Dzieki za pomoc, ale nie o to chodziło :D. Ja nie chcę, żeby rozwijało się pod linkiem tylko po prawej stronie. Przykład jaki chce zrobic jest tutaj.
Na razie mam tak:
<div id="button"><ul> <li><a href="#" title="Strona główna">Strona Główna</a></li> <li><a href="#" title="Panel">Panl Admin.</a></li> <li><a href="#" title="Download">Download</a></li> <li><a href="#" title="Konakt">Kontakt</a></li> <li><a href="#" title="FORUM">FORUM</a></li></div>
i w stylach css:
} #button { width: 169px; padding: 0; font: bold 10px verdana, tahoma, arial, sans-serif; } #button ul { list-style: none; margin: 0; padding: 0; border: medium none inherit; } #button li { padding: 0; text-align: left; } #button li a { display: block; padding: 0 0 0 8px; border-left: 12px solid #FF9933; color: #FF9933; text-decoration: none; width: 100%; } #button li a:hover { border-left: 12px solid #3399FF; color: #3399FF; }
Jak zmodyfikować lub dodać jakis kod, żeby było jeszcze rozwijane menu po prawej stronie z odsyłaczami, wierzę w odrobinkę Waszej pomocy :D
Użytkownik Radziozet123 edytował ten post 26 sierpień 2006, 22:16
1. z niczego nie będzie coś.
2. mój kod chodzi :P masz coś z przeglądarką?
3.: :google:
http://www.dynamicdr...inkvertical.htm
http://www.dynamicdr...anylinkcss2.htm
Twój kod chodzi, ale menu rozwija się pod odnośnikiem :P a nie po prawej :). Co do tych stronek już byłem na tych stronkach :lol: i żaden z tych kodów nie działa :blink: i dlatego zwróciłem się z prośbą do Was :) :)
Chyba, że mi zostało JS?? :huh:
Użytkownik Radziozet123 edytował ten post 27 sierpień 2006, 10:24
Twój kod chodzi, ale menu rozwija się pod odnośnikiem :P a nie po prawej :). Co do tych stronek już byłem na tych stronkach :lol: i żaden z tych kodów nie działa :blink: i dlatego zwróciłem się z prośbą do Was :) :)
Chyba, że mi zostało JS?? :huh:
Książka: CSS Według Erica Meyera
Rapidshare: Sciągnij pliki projektu
menu.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Project 6</title> <style type="text/css"> body {background: #EEE; color: #000; behavior: url(csshover.htc);} /* WinIE behavior call */ h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;} #main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid;} div#nav {float: left; width: 7em; margin: -1px 0 0 -1px; background: #FDD;} div#nav ul {margin: 0; padding: 0; width: 7em; background: white; border: 1px solid #AAA;} div#nav li {position: relative; list-style: none; margin: 0; border-bottom: 1px solid #CCC;} div#nav li:hover {background: #EBB;} div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;} div#nav li.submenu:hover {background-color: #EDD;} div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em;} div#nav>ul a {width: auto;} div#nav ul ul {position: absolute; top: 0; left: 7em; display: none;} div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 {display:block;} </style> </head> <body> <h1>Menu rozwijane</h1> <div id="nav"> <ul class="level1"> <li><a href="/">Home</a></li> <li class="submenu"><a href="/services/">Services</a> <ul class="level2"> <li><a href="/services/strategy/">Strategy</a></li> <li><a href="/services/optimize/">Optimization</a></li> <li><a href="/services/guidance/">Guidance</a></li> <li><a href="/services/training/">Training</a></li> </ul> </li> <li><a href="/events/">Events</a></li> <li class="submenu"><a href="/pubs/">Publications</a> <ul class="level2"> <li><a href="/pubs/articles/">Articles</a></li> <li class="submenu"><a href="/pubs/tuts/">Tutorials</a> <ul class="level3"> <li><a href="/pubs/tuts/html/">HTML</a></li> <li><a href="/pubs/tuts/css/">CSS</a></li> <li><a href="/pubs/tuts/svg/">SVG</a></li> <li><a href="/pubs/tuts/xml/">XML</a></li> </ul> </li> <li><a href="/pubs/wpapers/">White Papers</a></li> <li><a href="/pubs/comment/">Commentary</a></li> </ul> </li> <li><a href="/contact/">Contact</a></li> </ul> </div> <div id="main"> <p> </p> </div> </body> </html>
csshover.htc
<attach event="ondocumentready" handler="parseStylesheets" /> <script language="JScript"> /** * HOVER - V1.00.031224 - whatever:hover in IE * --------------------------------------------- * Peterned - [url="http://www.xs4all.nl/~peterned/"]http://www.xs4all.nl/~peterned/[/url] * © 2003 - Peter Nederlof * * howto: body { behavior:url("csshover.htc"); } * --------------------------------------------- */ var CSSBuffer, doc = window.document; function parseStylesheets() { var rules, sheet, sheets = doc.styleSheets; var bufferIndex = sheets.length; var head = doc.getElementsByTagName('head')[0]; var buffer = doc.createElement('style'); buffer.setAttribute('media', 'screen'); buffer.setAttribute('type', 'text/css'); head.appendChild(buffer); CSSBuffer = sheets[bufferIndex]; for(var i=0; i<sheets.length -1; i++) { sheet = sheets[i]; if(!sheet.media || sheet.media == 'screen') { rules = sheet.rules; for(var j=0; j<rules.length; j++) { parseCSSRule(rules[j]); } } } } function parseCSSRule(rule) { var select = rule.selectorText, style = rule.style.cssText; if(!select || !style || select.indexOf(':hover') < 0) return; var newSelect = select.replace(/\:hover/g, '.onHover'); CSSBuffer.addRule(newSelect, style); var affected = select.replace(/\:hover.*$/g, ''); var elements = getElementsBySelect(affected); for(var i=0; i<elements.length; i++) { if(elements[i].nodeName == 'A') continue; new HoverElement(elements[i]); } } /** * HoverElement * ------------------------- * applies the hover */ function HoverElement(element) { if(element.isHoverElement) return; element.isHoverElement = true; element.attachEvent('onmouseover', function() { element.className += ' onHover'; }); element.attachEvent('onmouseout', function() { element.className = element.className.replace(/onHover/g, ''); }); } /** * domFinder * ----------------------------------- * returns list of elements based on css selector */ function getElementsBySelect(rule) { var nodeList = [doc], sets = rule.split(' '); for(var i=0; i<sets.length; i++) { nodeList = domFinder.filterNodes(sets[i], nodeList); } return nodeList; } var domFinder = { findNodes:function(tag, docs) { var res, nodes = []; for(var i=0; i<docs.length; i++) { res = docs[i].getElementsByTagName(tag); for(var j=0; j<res.length; j++) nodes[nodes.length] = res[j]; } return nodes; }, filterNodes:function(select, docs) { var filtered = [], nodes,rule,atr,s = (/#|\./).exec(select); if(!s) return this.findNodes(select, docs); nodes = this.findNodes((rule = select.split(s))[0], docs); atr = (s == '#')? 'id':'className'; for(var i=0; i<nodes.length; i++) { if(new RegExp('(^|\\s)' + rule[1] + '(\\s|$)').exec(nodes[i][atr])) filtered[filtered.length] = nodes[i]; } return filtered; } } </script>
Mówisz masz.
Użytkownik orglee edytował ten post 28 sierpień 2006, 23:55
Cudeńko jesteś niesamowity. Wreszcie mam to co chciałem mieć :D :D Dzięki, i jeszcze raz wielkie dzięki :) :) :) Mam jeszcze jedno pytanko: jak przesunąć podmenu bardziej na prawo, bo zmieniłem szerokość do menu . Jak to wyglada jest tutaj . Jak zrobić przesunięcie podmenu, żeby nie zakrywało pozostałe menusy??
Użytkownik Radziozet123 edytował ten post 27 sierpień 2006, 14:11
Dobra spoko już znalazłem :D . Trzeba było zmienić na tej linijce:
div#nav ul ul {position: absolute; top: 0; left: 15em; display: none;}.
Koło wartości left zwiększyć liczbę :D
Użytkownik Radziozet123 edytował ten post 27 sierpień 2006, 14:18
Wie ktoś jak zrobić, żeby te menu użytkownika orglee działało również w Internet Explorer 6?? W Mozilla Firefox i Operze chodzi bez zarzutu tylko w IE chodzi nie poprawnie. Możecie jakoś temu zapobiec??
Moja strona jest tutaj.
Z góry bedę wdzięczny za pomoc i pozdrawiam wszystkich :) :)
W podanej przez orglee książce jest napisane, iż celem projektu jest, aby działał w jak największej liczbie przeglądarek, w tym również w IE.
ftp://ftp.helion.pl/...lady/cssods.zip
^Pliki projektu, projekt ma numer szósty ;)