Это мой первый вопрос, но я застрял, и я надеюсь, что я четко объясню, что я пытаюсь.
У меня есть навигационное меню, которое при нажатии на ссылку (этот выбор) перемещается в крайнее левое пятно меню. Независимо от того, какой пункт меню нажат, и в крайнем левом месте, я просто хочу, чтобы шрифт был больше и цвет оранжевый. Следующий параметр, который нужно щелкнуть, должен идти в левом пятне, а его шрифт больше и цвет оранжевый, а остальные варианты возвращаются к маленькому и белому.
Я также хотел бы, чтобы остальные параметры меню оставались в том же порядке, в котором они начинаются, если они не являются выбором в этом левом углу. Я хочу, чтобы мое подменю в конечном итоге выглядело и работало одинаково.
Вот мой код:
HTML:
<div>
<ul id="main-top">
<li id="blank"><a href="#" ></a></li>
<li><a href="#" id="proj1" class="mainNav">Projects</a></li>
<li><a href="#" id="serv1" class="mainNav">Services</a></li>
<li><a href="#" id="cont1" class="mainNav">Contact</a></li>
<li><a href="#" id="client1">Sign-in</a></li>
</ul>
</div>
CSS:
body {
background: black;
color: white;
}
#main-top {
position: absolute;
top: 75px;
border-top: 1px solid #ffffff;
width: 850px;
}
#main-top li{
display: inline;
list-style-type:none;
padding-right: 20px;
padding-bottom: 16px;
border-right: 1px solid #ffffff;
height: 50px;
}
a {
color: white;
font-size: 1em;
padding: 10px 75px 5px 3px;
text-decoration: none;
list-style-type: none;
}
a:hover{
color: #FF4500;
}
JQuery:
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$('#blank').hide();
});
demo: http://jsfiddle.net/CLTZs/
Я попробовал просто добавить функцию, чтобы изменить css первого ребенка, но он нацелен на это пустое место, а не то, что в него входит.
Только так я не оставляю этот вопрос там, где не ответил полностью - я смог получить желаемый эффект, используя ваше предложение @Vector и добавив немного, чтобы вернуть li к оригинальному виду:
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$this.toggleClass('active');
$this.siblings().removeClass("active");
$('#blank').hide();
});
и добавление класса "active" в мой CSS:
.active a{
color: #FF4500;
font-size: 25px;
font-weight: bold;
margin: 0;
}
Поскольку у меня есть другие jquery-переключатели, связанные с этими опциями меню, я смог вставить этот jquery прямо в мою существующую функцию, и она отлично работает. По какой-то причине он отбрасывает мой пробел в остальной части списка, но мне придется это выяснить в моих файлах css.
скрипка: http://jsfiddle.net/CLTZs/2/
Вы можете addClass
в свою функцию
DEMO http://jsfiddle.net/CLTZs/1/
JQuery
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$this.addClass('firstOpt');
$('#blank').hide();
});
CSS
#main-top li.firstOpt a {
color: #FF4500;
font-size: 25px;
font-weight: bold;
}