Erstellen eines Dropdown-Menüs, das den Seiteninhalt mithilfe von Layern und Z-Index ändert

Ich versuche, eine Seitenleiste für eine Website zu erstellen, die es einem Benutzer ermöglicht, ein Element aus einem Dropdown-Menü auszuwählen und einen RSS-Feed anzuzeigen. Der Feed ändert sich, je nachdem, welches Element aus der Liste ausgewählt ist. Ich bin mir nicht sicher, wie ich das acomplish, aber mein erster Gedanke war, z-Index zu verwenden und Layer ein-/ausblenden. Ich habe eine Ebene und das Menü eingerichtet, aber es erlaubt mir nicht, den Feed zu ändern, der angezeigt wird, wenn ein anderes Menüelement ausgewählt ist. Weiß jemand, wie ich das acomplish kann?

Ich habe eine Live-Vorschau auf das, was ich bisher gemacht habe. Es befindet sich auf der Website, CHUD, ,

Antwort auf "Erstellen eines Dropdown-Menüs, das den Seiteninhalt mithilfe von Layern und Z-Index ändert " 3 von antworten

Dies verwendet jQuery und jFeed Plugin, um den Inhalt eines DIV basierend auf einer Dropdown-Auswahl zu ersetzen.

// load first feed on document load
$(document).ready(
    function() {
       load_feed( $('select#feedSelect')[0], 'feedDiv' ) ); // pick first
    }
);

function load_feed( ctl, contentArea )  // load based on select
{
   var content = $('#' + contentArea )[0]; //pick first

   content.html( 'Loading feed, please wait...' );

   var feedUrl = ctl.options[ctl.selectedIndex].value;

   $.getFeed( { url: feedUrl,
        function(feed) {
           content.html( '' );
           content.append( '<h1>' + feed.title + '</h1>' );
           feed.items.each( 
              function(i,item) {
                  content.append( '<h2><a href="'
                                     + item.link
                                     + '">' 
                                     + feed.title
                                     + '</a></h2>' );
                  content.append( '<p>' + feed.description + '</p>' );
              }
           );
         }
     });
 }

HTML

<div>
   <select id=feedSelect onchange="load_feed(this,'feedDiv');" >
      <option value='url-to-first-feed' text='First Feed' selected=true />
      <option value='url-to-second-feed' text='Second Feed' />
      ...
   </select>
   <div id='feedDiv'>
   </div>
</div>

haben Sie zwei Optionen:

  1. vorab laden alle RSS-Feeds (ich gehe davon aus, dass Ihre <ul>'s in your example page are the HTML output of your RSS feeds?), hide them all when your document loads, and then reveal them as selected in Ihrer Beispielseite die HTML-Ausgabe Ihrer RSS-Feeds sind?), sie alle ausblenden, wenn Ihr Dokument geladen wird, und dann als ausgewählte

  2. verwenden Sie AJAX, um dynamisch die ausgewählten Feedinformationen zu greifen, wenn Ihr Auswahlfeld ändert.

hier ist ein kurzes Beispiel für eine Javascript- und jQuery-Version des ersten:

html:

<select id="showRss">
   <option name="feed1">Feed 1</option>
   <option name="feed2">Feed 2</option>
</select>

<div id="rssContainer">
   <ul id="feed1">
      <li>feed item 1</li>
      <li>...</li>
   </ul>
   <ul id="feed2">
      <li>feed item 2</li>
      <li>...</li>
   </ul>
   <!-- etc... -->
</div>

javascript:

var rss = document.getElementById('rssContainer'); // main container
var nodes = rss.getElementsByTagName('ul');        // collection of ul nodes
var select = document.getElementById('showRss');   // your select box

function hideAll()  {                              // hide all ul's
    for (i = 0; i < nodes.length; ++i)  {
        nodes[i].style.display = 'none';
    }
}

select.onchange = function()    {                  // use the 'name' of each
    hideAll();                                     // option as the id of the ul
    var e = this[this.selectedIndex].getAttribute('name');
    var show = document.getElementById(e);         // to show when selected
    show.style.display = 'block';
}

hideAll();

jQuery:

$('#showRss').change(function() {
    $('#rssContainer ul').hide('slow');            // added a bit of animation
    var e = '#' + $(':selected', $(this)).attr('name');
    $(e).show('slow');                             // while we change the feed
});

$('#rssContainer ul').hide();

um Option 2 zu tun, Ihre onchange function would handle the AJAX loading. if you're not that familiar with AJAX, and have a few feeds, option 1 is probably the easiest. (again, i'm assuming you have already parsed out your RSS as HTML, as that's another topic altogether). Funktion würde das AJAX-Laden verarbeiten. Wenn Sie mit AJAX nicht so vertraut sind und ein paar Feeds haben, ist Option 1 wahrscheinlich die einfachste. (Wiederum gehe ich davon aus, dass Sie Ihren RSS bereits als HTML analysiert haben, da dies ein weiteres Thema ist).

Ein bisschen Reverse Engineering kann einen langen Weg gehen.

Image_switcher

es ist in niederländisch, aber es ist einfach: Bewegen Sie die Maus über die <a> parts and the image switches. Teile und die Bildschalter.

Pure CSS+HTML, kein Javascript

Es ist nicht genau das gleiche, aber dies verwendet einfache CSS und HTML und kein Javascript erforderlich.