現在のページのナビゲーションメニューを強調表示する
いくつかのナビゲーションリンクがあるページでは、次のように現在のページのリンクが強調表示されるようにします。
リンク "HTML Attributes"は、このリンクが現在のページに移動するため、強調表示（太字）されています。
私はこれを手動で実装できることを知っています（対応するリンクを強調表示しただけですが、スマートな方法はありますか？適切なリンクを動的かつ自動的に強調表示しますか？
ページの本文のidを、現在のページを表す値に設定できます。次に、メニューの各要素に対して、そのメニュー項目に固有のクラスを設定します。 CSS内で、メニュー項目を具体的に強調表示するルールを設定できます...
それはおそらくあまり意味をなさないので、ここに例があります：
<body id="index">
<div id="menu">
<ul>
<li class="index" ><a href="index.html">Index page</a></li>
<li class="page1" ><a href="page1.html">Page 1</a></li>
</ul>
</div> <!-- menu -->
</body>
Page1.htmlでは、本文のIDをid="page1"に設定します。
最後に、CSSには次のようなものがあります。
#index #menu .index, #page1 #menu .page1 {
font-weight: bold;
}
各ページのIDを変更する必要がありますが、CSSは同じままです。これは、CSSが頻繁にキャッシュされ、更新するために強制更新が必要になることがあるため重要です。
動的ではありませんが、簡単な方法の1つであり、PHPまたは同様のものを使用してテンプレートファイルからメニューhtmlをincludeすることができます。
CSS：
.topmenu ul li.active a, .topmenu ul li a:hover {
text-decoration:none;
color:#fff;
background:url(../images/menu_a.jpg) no-repeat center top;
}
JavaScript：
<script src="JavaScript/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// this will get the full URL at the address bar
var url = window.location.href;
// passes on every "a" tag
$(".topmenu a").each(function() {
// checks if its the same on the address bar
if (url == (this.href)) {
$(this).closest("li").addClass("active");
//for making parent of submenu active
$(this).closest("li").parent().parent().addClass("active");
}
});
});
</script>
Htmlコード：
<div class="topmenu">
<ul>
<li><a href="Default.aspx">Home</a></li>
<li><a href="NewsLetter.aspx">Newsletter</a></li>
<li><a href="#">Forms</a></li>
<li><a href="#">Mail</a></li>
<li><a href="#">Service</a></li>
<li style="border:none;"><a href="#">HSE</a></li>
<li><a href="#">MainMenu2</a>
<ul>
<li>submenu1</li>
<li>submenu2</li>
<li>submenu3</li>
</ul>
</li>
</ul>
</div>
この「.menu-current css」として現在のコードが必要であるように思えますが、チャームのように機能する同じコードを求めています。
a:link, a:active {
color: blue;
text-decoration: none;
}
a:visited {
color: darkblue;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
div.menuv {
float: left;
width: 10em;
padding: 1em;
font-size: small;
}
div.menuv ul, div.menuv li, div.menuv .menuv-current li {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 5px;
font-weight: normal;
}
div.menuv ul ul {
padding-left: 12px;
}
div.menuv a:link, div.menuv a:visited, div.menuv a:active, div.menuv a:hover {
display: block;
text-decoration: none;
padding: 2px 2px 2px 3px;
border-bottom: 1px dotted #999999;
}
div.menuv a:hover, div.menuv .menuv-current li a:hover {
padding: 2px 0px 2px 1px;
border-left: 2px solid green;
border-right: 2px solid green;
}
div.menuv .menuv-current {
font-weight: bold;
}
div.menuv .menuv-current a:hover {
padding: 2px 2px 2px 3px;
border-left: none;
border-right: none;
border-bottom: 1px dotted #999999;
color: darkblue;
}
CSSクラスはこちら
<style type="text/css">
.mymenu
{
background-color: blue;
color: white;
}
.newmenu
{
background-color: red;
color: white;
}
</style>
このようにHTMLを作成し、URLをIDとして設定します
<div class="my_menu" id="index-url"><a href="index-url">Index</a></div>
<div class="my_menu" id="contact-url"><a href="contact-url">Contac</a></div>
ここでJavaScriptを記述し、このJavaScriptをHTMLコードの後に配置します。
function menuHighlight() {
var url = window.location.href;
$('#'+tabst).addClass('new_current');
}
menuHighlight();
<script id="add-active-to-current-page-nav-link" type="text/javascript">
function setSelectedPageNav() {
var pathName = document.location.pathname;
if ($("nav ul li a") != null) {
var currentLink = $("nav ul li a[href='" + pathName + "']");
currentLink.addClass("active");
}
}
setSelectedPageNav();
</script>
以下をご覧ください。
ここで何が機能しているのですか：
1.）トップメニューボタンが表示され、正しく強調表示される
2.）subメニューボタンは、topメニューがクリックされるまで表示されません。
ここで作業が必要なものです：
1.）サブメニューをクリックすると、選択したサブメニューを開いたままにする新しいページを探します（ナビゲーションをさらに明確にするために、選択したサブメニューボタンを強調表示します）
こちらのコードをご覧ください： http://jsbin.com/ePawaju/1/edit
またはここ： http://www.ceramictilepro.com/_6testingonly.php#
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
このスクリプトをheadセクションに配置する必要がありますか？最高の場所はどこですか？
<div class="left">
<nav class="vmenu">
<ul class="vnavmenu">
<li data-ref="Top1"><a class="hiLite navBarButton2" href="#">Home</a>
</li>
</ul>
<ul class="Top1 navBarTextSize">
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub1</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub2</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub3</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub4</a>
</li>
</ul>
<ul class="vnavmenu">
<li data-ref="Top2"><a class="hiLite navBarButton2" href="#">Repairs</a>
</li>
</ul>
<ul class="Top2 navBarTextSize">
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">1sub1</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">2sub2</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">3sub3</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">4sub4</a>
</li>
</ul>
</nav>
JQueryは私にとって新しいものであり、どんな助けでも大歓迎です:) varサブメニュー。
$('.vnavmenu li').click(function () {
var elems = $('.vmenu ul:not(.vnavmenu)').length;
var $refClass = $('.' + $(this).attr('data-ref'));
var visible = $refClass.is(':visible');
$('.vmenu ul:not(.vnavmenu)').slideUp(100, function () {
if (elems == 1) {
if (!visible) $refClass.slideDown('fast');
}
elems--;
});
if (visible) $('#breadcrumbs-pc').animate({
'margin-top': '0rem'
}, 100);
else $('#breadcrumbs-pc').animate({
'margin-top': '5rem'
}, 100);
});
私は通常、サーバー側でこれを処理します（つまり、PHP、ASP.NETなど）。この考え方は、ページがロードされると、サーバー側が（おそらくCSS値を設定することにより）メカニズムを制御し、クライアントに表示されるHTMLに反映されるというものです。
使用してみてください
a:active{
font-weight: bold;
}
あなたのcssファイルで。
通常、これを実現するためにクラスを使用します。何でも、ナビゲーションリンク、ハイパーリンクなどに実装するのは非常に簡単です。
CSSドキュメントに次を挿入します。
.current,
nav li a:hover {
/* styles go here */
color: #e00122;
background-color: #fffff;
}
これにより、リストアイテムのホバー状態に赤いテキストと白い背景が表示されます。現在のクラスを「現在の」ページのリンクに添付すると、同じスタイルが表示されます。
HTMLの挿入：
<nav>
<ul>
<li class="current"><a href="#">Nav Item 1</a></li>
<li><a href="#">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
</ul>
</nav>
Javascriptを使用してDOMを解析し、最初のh1タグと同じラベルのリンクを強調表示できます。しかし、私はそれが過剰だと思う=）
ページのタイトルを含む変数を設定し、それを使用して対応するリンクにクラスを追加することをお勧めします。
JavaScript：
<script type="text/javascript">
$(function() {
var url = window.location;
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().parent().parent().addClass('active');
});
</script>
CSS：
.active{
color: #fff;
background-color: #080808;
}
HTML：
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true"><i class="glyphicon glyphicon-user icon-white"></i> MY ACCOUNT <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<?php echo anchor('myaccount', 'HOME', 'title="HOME"'); ?>
</li>
<li>
<?php echo anchor('myaccount/credithistory', 'CREDIT HISTORY', 'title="CREDIT HISTORY"'); ?>
</li>
</ul>
</li>
</ul>