Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] [CSS] Menu rozwijane
Forum PHP.pl > Forum > Przedszkole
henio
Chciałbym aby mi ktoś pomógł skonstruować menu rozwijane.

  1. <?php
  2. echo "<div id='nawigacja'>n";
  3. echo "<ul>n";
  4. echo "<li><a href='index.php'>Strona Główna</a></li>n";
  5. echo "<li><a href='#'>Arsenal</a></li>n";
  6. echo "<li><a href='#'>Rozgrywki</a></li>n";
  7. echo "<li><a href='#'>Dla fanów</a></li>n";
  8. echo "<li><a href='#'>Serwis</a></li>n";
  9. echo "</ul>n";
  10. echo "</div>n";
  11. ?>


To moje menu.

A to plik CSS:
Kod
#nawigacja {
   position: absolute;
   top: 182px;
   left: 0px;    
   height: 23px;
   width: 998px;
   margin-left: auto;
   margin-right: auto;
   background-color: #711515;
   border: 2px solid #34537D;
   padding: 7px 0px 0px 0px;
   font-size: .9em;
   font-family: Arial, Helvetica, sans-serif;
}
#nawigacja ul {
   list-style: none;
   margin: 0;
   padding: 0px 0px 0px 0px;
}
#nawigacja li {
   display: inline;
}
#nawigacja a:link, #nawigacja a:visited {
  padding: 7px 7px 7px 7px;    
   color: #FFFFFF;
   background-color: #711515;
   text-decoration: none;
   border: 0px solid #711515;
}
#nawigacja a:hover {
   color: #FFFFFF;
   background-color: #B51032;
}


Chciałbym to tak zmienić, aby było to menu rozwijane

---
Stosuj znacznik [ code ]...
tiraeth
henio
Zrobiłem menu rozwijane:

Plik css
Kod
body {
   font-family: Verdana;

  behavior: url(csshover.htc);
}
div#nav {    
   position: absolute;
   top: 182px;
   left: 0px;    
   height: 20px;
   width: 998px;
   margin-left: auto;
   margin-right: auto;
   background-color: #B51032;
   border: 2px solid #34537D;
   padding: 0px 0px 0px 0px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: .9em;
}

div#nav ul {margin: 0;
padding: 0;
background: #B51032;
border: 1px solid #CCC;
border-width: 0 1px;
}

div#nav li {position: relative;
list-style: none;
margin: 0;
float: left;
width: 7em;
line-height: 1em;
}

div#nav li:hover {background: #EBB;
}

div#nav li.submenu:hover {background-color: #711515;
}

div#nav li a{
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 6.5em;;    
color: #FFFFFF;
   border: 0px solid #34537D;
}

div#nav>ul a {width: auto;
}

div#nav ul ul {position: absolute;
width: 7em;
display: none;
}

div#nav ul ul li {border-bottom: 1px solid #34537D;
}

div#nav li.submenu li.submenu {background: url(submenu.gif) 95% 50% no-repeat;
}

div#nav li.submenu li.submenu:hover {background-color: #711515;
}

div#nav li.submenu li.submenu:hover {background-color: #711515;
}

div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;
}

div#nav ul.level2 {top: 1.5em;
left: -1px;
}

div#nav ul.level3 {top: -1px;
left: 7em;
  border-top: 1px solid #34537D;
}


Plik csshover.htc
Kod
<attach event="ondocumentready" handler="parseStylesheets" />

<script language="JScript">
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>


Menu:
Kod
<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>



W pliku z rozszerzeniem .html działa bez zarzutu, natomiast w pliku .php juz nie. Proszę o pomoc

Czy ktoś wie dlaczego mi to nie działa?

Piszę tylko do siebie?! ?!

Chyba na to wychodzi! Czy ktoś wie w ogóle dlaczego to nie działa jak powinno
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.