([CSS])Rozwijane menu Opcje

[ShadowD]

Mam kody do rozwijanego menu w dół i w lewo oto one:

Lewe kod:

[HTML] pobierz, plaintext 
<style>
body { behavior: url(qw.htc);} 
 
#menu {width:100px; position: relative; margin-bottom:3px}
#menu #tytul {background-image: url('1.bmp'); width:100px; height:21px;}
#menu #tytul2 {position:absolute; top:0px; visibility:hidden; background-image: url('2.bmp'); width:103px; height:21px;}
#menu #lista {position:absolute; top:0px; left:103px; visibility:hidden;}
#menu #tytul, #tytul2, a {background-repeat: no-repeat;}
#menu a {display:block; width:100px; height:21px; background-image: url('forum.bmp'); margin-bottom:3px;}
#menu:hover #lista {visibility:visible;}
#menu:hover #tytul2 {visibility:visible;}
</style>
 
<div id='menu'>
<div id='tytul'></div>
<div id='tytul2'></div>
<div id='lista'>
<a href=#></a>
<a></a>
<a></a>
<a></a>
</div></div>
<div id='menu'>
<div id='tytul'></div>
<div id='tytul2'></div>
<div id='lista'>
<a></a>
<a></a>
<a></a>
<a></a>
</div></div>
<div id='menu'>
<div id='tytul'></div>
<div id='tytul2'></div>
<div id='lista'>
<a></a>
<a></a>
<a></a>
<a></a>
</div></div>
<div id='menu'>
<div id='tytul'></div>
<div id='tytul2'></div>
<div id='lista'>
<a></a>
<a></a>
<a></a>
<a></a>
</div></div>
[HTML] pobierz, plaintext 

Dolne kod:

[HTML] pobierz, plaintext 
<style>
body { behavior: url(qw.htc);} 
 
div {width:100px;}
div a {display:block; border:1px solid black; width:100px; text-align:center;}
div p {margin:0px; visibility:hidden; position:absolute;}
 
div #menu {font-weight:600}
div #lista {margin-top:3px;}
 
div:hover p {visibility:visible;}
 
</style>
 
<div>
<a id='menu'>Menu</a>
<p>
<a id='lista'>qwqw</a>
<a id='lista'>qwqw</a>
</p>
</div>
[HTML] pobierz, plaintext 

Są to moje projekty a wiec udostępniam je, starałem się by działały pod najważniejszymi przeglądarkami i działają z wyjątkiem ie lecz i na to znalazłem sposób kod JS który już nie jest moim autorstwem kod:

[HTML] pobierz, plaintext 
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
 
var currentSheet, doc = window.document, activators = {
 onhover:{on:'onmouseover', off:'onmouseout'},
 onactive:{on:'onmousedown', off:'onmouseup'}
}
 
function parseStylesheets() {
 var sheets = doc.styleSheets, l = sheets.length;
 for(var i=0; i<l; i++) 
  parseStylesheet(sheets[i]);
}
 function parseStylesheet(sheet) {
  if(sheet.imports) {
   try {
    var imports = sheet.imports, l = imports.length;
    for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
   } catch(securityException){}
  }
 
  try {
   var rules = (currentSheet = sheet).rules, l = rules.length;
   for(var j=0; j<l; j++) parseCSSRule(rules[j]);
  } catch(securityException){}
 }
 
 function parseCSSRule(rule) {
  var select = rule.selectorText, style = rule.style.cssText;
  if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
 
  var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
  var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
  var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
  var affected = select.replace(/:hover.*$/, '');
  var elements = getElementsBySelect(affected);
 
  currentSheet.addRule(newSelect, style);
  for(var i=0; i<elements.length; i++)
   new HoverElement(elements[i], className, activators[pseudo]);
 }
 
function HoverElement(node, className, events) {
 if(!node.hovers) node.hovers = {};
 if(node.hovers[className]) return;
 node.hovers[className] = true;
 node.attachEvent(events.on,
  function() { node.className += ' ' + className; });
 node.attachEvent(events.off,
  function() { node.className = 
   node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
 
function getElementsBySelect(rule) {
 var parts, nodes = [doc];
 parts = rule.split(' ');
 for(var i=0; i<parts.length; i++) {
  nodes = getSelectedNodes(parts[i], nodes);
 } return nodes;
}
 function getSelectedNodes(select, elements) {
  var result, node, nodes = [];
  var classname = (/\.([a-z0-9_-]+)/i).exec(select);
  var identify = (/\#([a-z0-9_-]+)/i).exec(select);
  var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
  for(var i=0; i<elements.length; i++) {
   result = tagName? elements[i].all.tags(tagName):elements[i].all; 
   for(var j=0; j<result.length; j++) {
    node = result[j];
    if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
     classname[1] + '\\b').exec(node.className)))) continue;
    nodes[nodes.length] = node;
   }
  } return nodes;
 }
</script>
[HTML] pobierz, plaintext 

Trzeba go zapisać jako plik "qw.htc".

WAŻNE NIE POZWALAM SIĘ PODPISWAĆ POD AUTORSTWEM TEGO SKRYPTU!!

Może przydadzą się komuś łatwo je edytować...

Ten post edytował ShadowD 28.03.2008, 22:06:21

[grzesiek_g]

Menu nie tworzy się na znacznikach div lub p, bardziej do tego odpowiednie są listy. A to rozwiązanie nie jest takie doskonałe, w sieci pełno lepszych przykładów.

P.S. Zauważyłem, że wykorzystujesz na tła pliki .bmp, to nie format do sieci, za duży. Najlepsze rozwiązanie to .png, odpowiednio zoptymalizowany.

[ShadowD]

Ach co do grafiki to tylko przykład..
A co do li i ui to też nie jest najlepszy przykład ponieważ jest duży problem do dopasowania wglądu w wszystkich przeglądarkach i w nie których nie wgląda to najlepiej.

Zamieściłem jak komuś się przyda to niech sobie weźmie a jak nie to nie...