/ / използвайте курсора, за да посочите текущата страница в менюто за навигация - css, навигация

използвайте курсора, за да посочите текущата страница в менюто за навигация - css, навигация

Имам вертикално изведено навигационно меню. Бих искал една точка за куршум да се появи вляво от страницата, която се гледа понастоящем. Прочетох малко за използването на промените на фона li за да покаже страница, но не знам как да го прилагам на куршуми. Някакви идеи?

<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/

Отговори:

1 за отговор № 1

Актуализация

Живи примери за всички предлагани решения

Работейки с AMC беше установено, че aРешението на JavaScript ще работи по-добре предвид изискванията. Цялото съдържание ще се показва на една страница, така че решенията за CSS няма да работят въз основа на моите констатации. Предложих простия jQuery код да покаже куршум, когато кликне върху връзката.

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;
}

Тази страница съдържа примери за всички решения но ще намерите решението jQuery сами на тази връзка: http://jsfiddle.net/jtRws/10/.


Интересен проблем. Очевидно има решения на JavaScript, но изглежда, че искате чисто CSS решение.

Решение 0

Скрийте останалите елементи от списъка, като зададете цвета на стил на списъка на цвета на фона.

Всички страници ще имат един и същ навигационен HTML, но всяка страница <body> ще има id уникален за тази страница. Например: <body id="home">, <body id="products">, и т.н. След това, използвайки умен CSS, текущата страница ще получи специфичната дефиниция на стила (последната дефиниция по-долу).

#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;
}

Решение 1

употреба background за да покажете и скриете изображението на куршума. Въз основа на тази статия Използвах следния код. Статията обяснява техниката по-подробно. По-долу ще намерите същия код като примера на живо.

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;
}
Продуктова страница
<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 за отговор № 2

Предполагам, че използвате котви за навигация през секциите на страниците, така че единственият начин, по който мога да се сетя, е да използвате javascript (jQuery).

Аз актуализирах примерния си код: http://tinyurl.com/a6ypyuz


0 за отговор № 3

В допълнение към answer@earthdesigner, ако не искате да добавите jquery, използвайте този javascript вместо това:

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 за отговор № 4

Разбирам, че искате куршуми само на текущата страница. Така че най-напред трябва да премахнем нормалните куршуми.

ul {list-style-type:none;}

След това видях, че използвате идентификационни номера за съдържание на всяка страница. Съчетавайки това с подбор на атрибути, тук е пример за това, което можете да направите:

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