Czy ta nawigacja może być wykonana całkowicie w CSS

Trochę utknąłem. Stworzyłem prawie wszystko na poniższym obrazku. Utknąłem na tym, że próbuję ustalić, w jaki sposób mogę je skonfigurować, aby po kliknięciu jednego z linków linia poniżej stała się czerwona (po załadowaniu następnej strony). Oczywiście musiałbym użyć Jquery'ego, aby wykryć stronę, a następnie dodać wbudowane css, ale to, z czym się zmagam, chcę, aby było to tak proste, jak to tylko możliwe, aby móc przekazać ten szablon innym, a następnie dodawać lub usuwać elementy jako niezbędny. Próbowałem dowiedzieć się, czy mogę w jakiś sposób użyć elementu li, aby to zrobić, ale jeszcze nie znalazłem sposobu. Czy ktoś ma jakieś pomysły, aby mi pomóc?Czy ta nawigacja może być wykonana całkowicie w CSS

enter image description here

Źródło

2012-03-23 atrljoe

Zbuduj swoje menu jak to w HTML:

<body id='Search' > 
    <div id='menu'> 
     <div class='bars'></div> 
     <a href='/home/' title='Home'>Home</a> 
     <a href='/community/' title='Community'>Community</a> 
     <a href='/search/' title='Search'>Search</a> 
     <a href='/contact/' title='Contact'>Contact</a> 
     <div class='bars shift'></div>    
    </div> 
</body>

Zauważ, że znacznik korpus ma stronę-specyficzny id (jak sugeruje Cody). Zwróć też uwagę, że ten identyfikator musi być taki sam jak wartość atrybutu title dla linku menu.

Następnie użyj tej CSS:

.bars {border-top:1px solid #CCC;border-bottom:1px solid #CCC;height:5px;} 
.shift {margin-top:-6px;} 
#menu {font-family:arial;font-size:12pt;text-align:center;}  
#menu a {display:inline-block;padding:7px;text-decoration:none;color:#000;} 
.active {border-bottom:5px solid red;}

Wreszcie dodać jQuery do każdej strony:

$(document).ready(function(){ 
    var id = $('body').attr('id'); 
    $('#menu a').each(function() { 
     var title = $(this).attr('title'); 
     $(this).removeClass('active'); 
     if (title == id) $(this).addClass('active'); 
    }); 
});

można zobaczyć na żywo skrzypce demo here. (Aby przetestować, po prostu zmień id elementu body i naciśnij "run".)

EDYCJA: Zaletą tej metody w porównaniu do metody Cody'ego Graysa jest to, że nie trzeba modyfikować css za każdym razem, gdy zmienia się kod HTML podczas dodawania, usuwania lub edytowania elementu menu. Z drugiej strony używa jQuery. Jednakże, jeśli chcesz mieć rozwiązanie czystego css, po prostu usuń jQuery i id elementu body, a zamiast tego zastosuj bezpośrednio klasę .active do konkretnego linku, w zależności od konkretnej strony (podobnie jak w przypadku sugestii JackJoe).

Można to łatwo zmodyfikować, jeśli musisz użyć elementów <li>.

Źródło

2012-03-24 00:13:36 Stefan

Podobnie jak możesz wprowadzić statyczny identyfikator ciała z wyprzedzeniem lub dynamicznie przy programowaniu po stronie serwera, możesz również zastosować klasę aktywną z góry lub po stronie serwera. – Stefan

To dość proste. Utwórz klasę na "aktywny" stan i styl to:

<li class="active">Home</li>

i styl to (w zależności od struktury HTML, ale masz pomysł)

CSS:

.active { 
    border-bottom: 3px red solid; 
}

Wszystko, co musisz zrobić, to umieścić klasę podczas ładowania strony (na przykład serwer).

Źródło

2012-03-23 20:33:24 jackJoe

Możesz to zrobić the way jackJoe suggests i ustaw po stronie serwera klasy active na aktualnie wybranej stronie, ale można to również zrobić przy użyciu czystego CSS i nieco wcześniejszego planowania.

Dotyczy to najpierw ustawienia atrybutu id dla znacznika <body> strony, co jest dobrą praktyką. Następnie Twój plik CSS skorzysta z tego obiektu id, aby określić, który <li> powinien wyglądać jako "aktywny".

Przykładowy kod strony: CSS

<body id="main"> <!-- change this id for each page --> 
    <ul> 
     <li class="main-nav"><a href="#">Main</a></li> 
     <li class="community-nav"><a href="/community">Community</a></li> 
     <li class="search-nav"><a href="/search">Search</a></li> 
    </ul> 
</body>

Próbka:

li.main-nav, 
li.community-nav, 
li.search-nav 
{ 
    background: #FFF; 
    /* your other awesome styles */ 
} 

#main li.main-nav, 
#community li.community-nav, 
#search li.search-nav 
{ 
    /* style the active tab differently */ 
    background: #F00; 
}

ten sposób kod HTML dla sekcji nawigacji może zostać całkowicie statycznego na każdej stronie. Nie musi on być renderowany po stronie serwera ani modyfikowany dynamicznie po stronie klienta.

Jest ładny write-up na temat tej techniki dostępne w ciągu dnia Sztuczki CSS: ID Your Body For Greater CSS Control and Specificity

Źródło

2012-03-23 20:40:13

Przyszli tutaj, aby napisać tę samą technikę. Rozgrywki dla ciebie, mój dobry panie. –

Zobacz, nie rozumiem, dlaczego ludzie martwią się takimi śmieciami jak "nie używaj selektorów ID w CSS!" Takie techniki są najlepszymi identyfikatorami. – BoltClock

Problem z Twoją sugestią polega na tym, że dodając nową pozycję do menu, musisz również dodać nową klasę. Również użycie "aktywnej" klasy w elemencie menu pomaga oddzielić przedmiot w przypadku, gdy masz podelementy. – jackJoe

Czy ta nawigacja może być wykonana całkowicie w CSS

Odpowiedz

Powiązane problemy