/ / użyj bullet, aby wskazać aktualną stronę w menu nawigacji - css, navigation

użyj wypunktowania, aby wskazać aktualną stronę w menu nawigacji - css, navigation

Mam pionowe menu nawigacyjne. Chciałbym, aby punkt wypunktowania pojawił się po lewej stronie aktualnie oglądanej strony. Czytałem trochę o stosowaniu zmian w tle li wskazać stronę, ale nie wiem, jak to zastosować do używania pocisków. Jakieś pomysły?

<nav>
<ul>
<li><a href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#lookbook">lookbook</a></li>
<li><a href="#services">services</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#">blog</a></li>
</ul>
</nav>

nav {
position: fixed;
right: 13%;
top: 65%;
}

nav ul li {
text-align: right;
}

http://jsfiddle.net/jtRws/

Odpowiedzi:

1 dla odpowiedzi № 1

Aktualizacja

Żywe przykłady wszystkich proponowanych rozwiązań

We współpracy z AMC ustalono, że aRozwiązanie JavaScript działa lepiej, biorąc pod uwagę wymagania. Cała zawartość pojawi się na jednej stronie, więc rozwiązania CSS nie będą działały w oparciu o moje wyniki. Zaproponowałem prosty kod jQuery, aby wyświetlać punktor po kliknięciu łącza.

jQuery
$(window).load(function(event) {
$("a").click(function() {
$("#Nav li").removeClass();
$(this).parent().addClass("current");
});
});
CSS
#navcontainer3 ul {
width: 200px;
list-style-type:disc;
}

#navcontainer3 ul li {
color: #ccc;
float:right;
clear:right;
}

#navcontainer3 ul li.current {
color: #000;
}

Ta strona zawiera przykłady wszystkich rozwiązań ale sam znajdziesz rozwiązanie jQuery pod tym linkiem: http://jsfiddle.net/jtRws/10/.


Interesujący problem. Oczywiście są rozwiązania JavaScript, ale wygląda na to, że potrzebujesz czystego rozwiązania CSS.

Rozwiązanie 0

Ukryj punktory innych elementów listy, ustawiając kolor stylu listy na kolor tła.

Wszystkie strony będą miały ten sam HTML nawigacji, ale każda strona <body> będzie miał id unikalny dla tej strony. Na przykład: <body id="home">, <body id="products">itd. Następnie, używając sprytnego CSS, bieżąca strona uzyska specyficzną definicję stylizacji (ostatnia def poniżej).

#navcontainer0 ul {
width: 200px;
list-style-type:disc;
}

#navcontainer0 ul li {
color: #fff;
float:right;
clear:right;
}

body#home #homenav0,
body#products #prodnav0 {
color: #000;
}

Rozwiązanie 1

Posługiwać się background aby pokazać i ukryć obraz punktora. Na podstawie tego artykułu Użyłem następującego kodu. Artykuł objaśnia tę technikę bardziej szczegółowo. Poniżej znajdziesz ten sam kod, co przykład na żywo.

CSS
#navcontainer ul {
width: 200px;
padding:0;
margin:0;
text-align:right;
}

#navcontainer ul li a:hover {
color: #930;
background: #f5d7b4;
}

body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
background:url(bullet.gif) 0 50% no-repeat no-repeat;
padding-left:15px;
}
Strona produktów
<body id="products">
<div id="navcontainer">
<ul id="navlist">
<li><a id="homenav" href="index.html">Home</a></li>
<li><a id="prodnav" href="products.html" >Products</a></li>
</ul>
</div>
</body>

0 dla odpowiedzi nr 2

Zakładam, że używasz kotwic do nawigacji po sekcjach stron, więc jedyny sposób, jaki mogę teraz wyobrazić, to używanie javascript (jQuery).

"Zaktualizowałem Twój przykład kodu: http://tinyurl.com/a6ypyuz


0 dla odpowiedzi № 3

Oprócz odpowiedzi @earthdesigner, jeśli nie chcesz dodawać jquery, użyj tego javascript zamiast:

http://jsfiddle.net/7uxcg/31/

window.onload = function() {
// var nav = document.getElementById("nav");
var nav = document.getElementsByTagName("NAV")[0].children[0];

for(c in nav.children) {
var li = nav.children[c];
if(li.nodeName == "LI") {
li.onclick = function() {
changeClass(this.children[0].hash);
}
}
}

function changeClass(cur) {
var nav = document.getElementsByTagName("NAV")[0].children[0];

for(c in nav.children) {
var li = nav.children[c];
if(li.nodeName == "LI" && li.children[0].hash == cur)
li.className = "active";
else
li.className = ""
}
}
};

0 dla odpowiedzi nr 4

Rozumiem, że chcesz wypunktowania tylko do bieżącej strony. Przede wszystkim chcemy wyeliminować normalne pociski.

ul {list-style-type:none;}

Wtedy zobaczyłem, że używasz id "s dla div zawartości na każdej stronie. Łączenie tego z selektorem atribute tutaj jest przykładem tego, co możesz zrobić:

#home li a[href="#home"]:before, #about li a[href="#about"]:before {
content:"•";pointer-events:none; text-decoration:none;
}