• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zweite Navigation - Gesamten Eingaben werden angezeigt

Loerbs

Loerbs

Mitglied
Moin Moin,

ich habe ein Problem. Bin gerade dabei mir eine neue Frimen-Website zu Schreiben und Programmieren.
Nun bin ich beim ersten Punkt "Webdesign" angelangt.

Links seht Ihr ein Menü:
  • Unser Team
  • Referenzen
  • Joomla!
  • html5 & css3
Nun wollte ich gerne für jeden Menü Punkt etwas schreiben, aber da fing mein Problem an.
1. Wo nimmt der Browser sich aus den Quelltext die Stelle, dasa er alle Menü Punkte (Wenn keins aufgewählt) ist anzeigt und den Inhalt ausgibt?
2. Wieso ist mein Text als Link Formatiert?

Ich seh einfach keine Stelle die so was vorgibt. Vieleicht Ihr?

HTML: 
div id="work" class="page">
            <div class="container">

                <div class="row">
                    <div class="span12">
                        <div class="title-page">
                            <h2 class="title">Webdesign</h2>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="span3">

                        <nav id="options" class="work-nav">
                            <ul id="filters" class="option-set" data-option-key="filter">
                                <li class="type-work">Webdesign bei der ManholdMedia</li>
                                <li><a href="#filter" data-option-value=".team">Unser Team</a></li>
                                <li><a href="#filter" data-option-value=".referenzen">Referenzen</a></li>
                                <li><a href="#filter" data-option-value=".joomla">Joomla!</a></li>
                                <li><a href="#filter" data-option-value=".html5">html5 & css3</a></li>
                            </ul>
                        </nav>

                    </div>
                   
                    <div class="span9">
                        <div class="row">
                            <section id="projects">
                           
                           
                                <ul id="thumbs">
                                    <li class="item-thumbs span3 team">
                                        <p>Unser Team<p/>
                                    </li>
                                </ul>
                               
                                <ul id="thumbs">
                                    <li class="item-thumbs span3 referenzen">
                                        <p>Unsere Referenzen<p/>
                                    </li>
                                </ul>
                               
                                <ul id="thumbs">
                                    <li class="item-thumbs span3 joomla">
                                        <p>Joomla<p/>
                                    </li>
                                </ul>
                               
                                <ul id="thumbs">
                                    <li class="item-thumbs span3 html5">
                                        <p>html5 & css3<p/>
                                    </li>
                                </ul>
                               
                               
                            </section>
                           
                        </div>
                    </div>
                </div>

            </div>
        </div>

Habe euch die Seite auch einmal auf unseren Server hochgeladen, dan seht ihr genau was ich meine.
http://www.manholdmedia.com/neu/

Ihr müsst ein Stück runter scrollen.

Danke für euere Mühe!

Liebe Grüße
Alexander Lörbs
 
Werbung:
Du hast hier noch 3 Schreibfehler im HTML-Code:
http://validator.w3.org/check?verbose=1&uri=http://www.manholdmedia.com/neu/

Und zu deiner Frage: Du musst selbst im Code festlegen, welche Elemente wann angezeigt werden. Am Beispiel eines Menüs musst Du also auf einer Seite A das Element z.B. mit einer Klasse markieren, welches auf dieser Seite hervorgehoben werden soll. Auf Seite B wiederum markierst Du so ein anderes Element. HTML wie auch CSS können das nicht automatisiert für dich übernehmen. Wenn Du ein CMS/Blogsystem einsetzt, könnte man solche Markierungen ggfs. über deren Automatismen im Quellcode unterbringen, wichtig ist lediglich, dass dadurch der HTML-Code so markiert wird, dass die von dir definierte CSS-Eigenschaft wirkt.
 
Dieses wurde doch schon definiert. Klickt man die einzelden Menü Punkte durch, wird jewals mein Text angezeigt den ich gerne haben möchte... Sobald man abder die Seite Aufruft oder aktualisiert werden dort alle Eingaben vorerst angezeigt, sobald man dann eine auswahl trift, ist es so wie ich es haben möchte. Nun bin ich mir nicht sicher wo im Quelltext gesagt wird: "Gebe alle aus, wenn eine Eingabe getroffen wird dan nur noch das gewählte Element"...

Es hat ja was mir
HTML: 
<ul id="filters" class="option-set" data-option-key="filter">
zu tun. Es werden die Inhalte je nach aufruf geflitert.
Aber warum wird bei Keine auswahl alles Angezeigt, und wieso kann ich nicht einfach "Unser Team" als erste auswahl definieren.??

Vieleicht weiß du es jetzt was ich meine.

Liebe Grüße und vielen Dank für deine Mühe
 
Zuletzt bearbeitet:
Werbung:
Habe es mir nun so gedacht
HTML: 
<nav id="options" class="work-nav">
                            <ul id="filters" class="option-set" data-option-key="filter">
                                <li class="type-work">Webdesign bei der ManholdMedia</li>
                                <li><a href="#filter" data-option-value=".team" class="selected">Unser Team</a></li>
                                <li><a href="#filter" data-option-value=".referenzen">Referenzen</a></li>
                                <li><a href="#filter" data-option-value=".joomla">Joomla!</a></li>
                                <li><a href="#filter" data-option-value=".html5">html5 & css3</a></li>
                            </ul>
                        </nav>

Funktioniert aber auch nicht. Es wird zwar "Unser Team" als erste Auswahl getrofen, aber denoch wird alles an inhalt wieder gegeben.... Klickt man nun in ein ein anderen Menü Punkt wie z.B. "Referenzen" und kehrt dann wieder auf "Unser Team" zurück wird nur der Inhalt wieder geben den ich auch wirklich nur für "Unser Team" definiert habe. Das Problem taucht nur auf wenn man die Seite neu Besucht bzw. aktualisiert.
 
Ich verstehe die Frage nicht wirklich. Soll das eine SinglePage werden, wo bei Klick auf den jeweiligen Navigationspunkt nach unten gescrollt wird? In dem Fall müssen die Verlinkungen innerhalb der Seite entsprechend gesetzt werden, und beim Reload wird natürlich immer der obere Teil angezeigt.
 
Nebenbei bemerkt: Warum diese Schreibweise?

Code: 
<li><a href="#filter" data-option-value=".referenzen">Referenzen</a></li>
 
Werbung:
Hallo Tronjer,

Ich spreche nicht von den oberen Menü, dieses wird anders angepasst.
Ich spreche von dieser Auswahl an der Linken Seite
HTML.jpg

Klicke einfach mal "Unser Team" an. Dan kommt mein Text...
Aber wieso wird am Anfang aus jeden Bereich, Menüpunkt der Text wieder gegeben?

Bitte Beachte, der Text ist gleichnamig mit den Name des einzelden Menüpunktes.
 
Tronjer schrieb:
Nebenbei bemerkt: Warum diese Schreibweise?

Code: 
<li><a href="#filter" data-option-value=".referenzen">Referenzen</a></li>
Zum Vergrößern anklicken....

Damit meine Auswahl, also mein Text jewals gefiltert wird.... Das Funktioniert ja so weit. Aber ich möchte das nicht alles Angezeigt wird, sondern von anfang an der Textinhalt von"Unser Team" gefiltert wird. Und nicht alles wieder gegeben wird...
 
Ah ok, ist das ein Plugin?

Du hast zumindest eine Sache falsch gemacht. Alle <ul> tragen dieselbe ID "thumb". Passe das erstmal an.
 
Werbung:
Die Antwort auf deine Frage kann nur das JavaScript liefern, welches die Navigation deiner Seite beeinflusst. Das hat mit CSS und auch HTML nichts mehr zu tun. Du müsstest in der Dokumentation des JavaScripts nachschauen wie man diese so konfigurieren kann, dass man irgendeine Unterseite ebenfalls aufrufen kann und der entsprechende Inhalt direkt angezeigt wird.
 
Habe ich nun angepasst....
Habe nun auch den jewaligen Text angepasst, damit es besser sichbar wird. Aber irgentwo muss doch definiert sein, das beim Start der Seite, wenn nichts ausgewählt ist, alles ausgegeben wird. Sobald etwas ausgwählt ist, sieht man ja auch nur noch die Eingaben die man sehen möchte....

Es soll aber nicht am Anfang alles ausgegeben werden, sondern nur "Unser Team" also der Text inhalt.

Komische Angelegenheit.... :/
 
Habe in JS zwei einträge für die Navigation.
Das eine für Mobil-Geräte...
Code: 
/* ==================================================
  Mobile Navigation
================================================== */
var mobileMenuClone = $('#menu').clone().attr('id', 'navigation-mobile');

BRUSHED.mobileNav = function(){
    var windowWidth = $(window).width();
  
    if( windowWidth <= 979 ) {
        if( $('#mobile-nav').length > 0 ) {
            mobileMenuClone.insertAfter('#menu');
            $('#navigation-mobile #menu-nav').attr('id', 'menu-nav-mobile');
        }
    } else {
        $('#navigation-mobile').css('display', 'none');
        if ($('#mobile-nav').hasClass('open')) {
            $('#mobile-nav').removeClass('open');  
        }
    }
}

BRUSHED.listenerMenu = function(){
    $('#mobile-nav').on('click', function(e){
        $(this).toggleClass('open');
      
        if ($('#mobile-nav').hasClass('open')) {
            $('#navigation-mobile').slideDown(500, 'easeOutExpo');
        } else {
            $('#navigation-mobile').slideUp(500, 'easeOutExpo');
        }
        e.preventDefault();
    });
  
    $('#menu-nav-mobile a').on('click', function(){
        $('#mobile-nav').removeClass('open');
        $('#navigation-mobile').slideUp(350, 'easeOutExpo');
    });
}

Wo dran es aber nicht liegen kann, glaube ich.

Und einmal diesen Eintrag.
Code: 
/* ==================================================
  Navigation Fix
================================================== */

BRUSHED.nav = function(){
    $('.sticky-nav').waypoint('sticky');
}

Code: 
/* ==================================================
  Filter Works
================================================== */

BRUSHED.filter = function (){
    if($('#projects').length > 0){       
        var $container = $('#projects');
       
        $container.imagesLoaded(function() {
            $container.isotope({
              // options
              animationEngine: 'best-available',
              itemSelector : '.item-thumbs',
              layoutMode : 'fitRows'
            });
        });
   
       
        // filter items when filter link is clicked
        var $optionSets = $('#options .option-set'),
            $optionLinks = $optionSets.find('a');
   
          $optionLinks.click(function(){
            var $this = $(this);
            // don't proceed if already selected
            if ( $this.hasClass('selected') ) {
              return false;
            }
            var $optionSet = $this.parents('.option-set');
            $optionSet.find('.selected').removeClass('selected');
            $this.addClass('selected');
     
            // make option object dynamically, i.e. { filter: '.my-filter-class' }
            var options = {},
                key = $optionSet.attr('data-option-key'),
                value = $this.attr('data-option-value');
            // parse 'false' as false boolean
            value = value === 'false' ? false : value;
            options[ key ] = value;
            if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
              // changes in layout modes need extra logic
              changeLayoutMode( $this, options )
            } else {
              // otherwise, apply new options
              $container.isotope( options );
            }
           
            return false;
        });
    }
}


Aber wie soll ich hier definieren das der Inhalt von "Unser Team" aufgerufen wird, und nicht alles?

Liebe Grüße und Danke!
 
Werbung:
Habe es nun geändert. Nun ist es so wie ich es haben möchte, doch wenn man nun einen anderen Menü Punkt anwählt, wird dieser auch nicht wieder angezeigt.... :/
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben