webentwicklung-frage-antwort-db.com.de

markieren Sie das Navigationsmenü für die aktuelle Seite

In einer Seite mit Navigationslinks möchte ich, dass der Link der aktuellen Seite hervorgehoben wird, genau wie folgt:

alt text

Der Link " HTML Attributes " ist hervorgehoben (fett gedruckt), da dieser Link zur aktuellen Seite führt.

Ich weiß, dass dies manuell implementiert werden kann (nur den entsprechenden Link hervorgehoben, aber gibt es einen intelligenten Weg?) Den richtigen Link dynamisch und automatisch markieren?

18
hguser

Sie können die ID des Hauptteils der Seite auf einen Wert setzen, der die aktuelle Seite darstellt. Dann legen Sie für jedes Element im Menü eine für diesen Menüpunkt spezifische Klasse fest. Innerhalb Ihres CSS können Sie eine Regel einrichten, die den Menüpunkt speziell hervorhebt.

Das hat wahrscheinlich nicht viel Sinn gemacht, deshalb hier ein Beispiel:

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

In page1.html würden Sie die ID des Körpers auf Folgendes setzen: id="page1".

Schließlich haben Sie in Ihrem CSS so etwas wie das Folgende:

#index #menu .index, #page1 #menu .page1 {
  font-weight: bold;
}

Sie müssen die ID für jede Seite ändern. Das CSS bleibt jedoch gleich. Dies ist wichtig, da das CSS häufig zwischengespeichert wird und eine Aktualisierung erzwungen werden kann.

Es ist nicht dynamisch, aber es ist eine Methode, die einfach durchzuführen ist, und Sie können einfach include das Menü html aus einer Vorlagendatei mithilfe von PHP oder ähnlichem ändern.

27
icabod

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 Quelltext:

<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>
33
Raj

Es scheint mir, dass Sie aktuellen Code als ".menu-current css" benötigen. Ich frage den gleichen Code, der wie ein Zauber wirkt. Sie könnten etwas wie dieses versuchen, es könnte jedoch noch eine Konfiguration geben 

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

Css-Klassen sind hier

<style type="text/css">
.mymenu
{
    background-color: blue;
    color: white;
}
.newmenu
{
    background-color: red;
    color: white;
}
</style>

Machen Sie Ihren HTML-Code so, setzen Sie URL als 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>

Hier schreiben Sie Javascript, setzen Sie dieses Javascript nach dem HTML-Code.

    function menuHighlight() {
       var url = window.location.href;
       $('#'+tabst).addClass('new_current');
    }
    menuHighlight();
1
saravanabawa
<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
user1878526

Bitte schauen Sie sich folgendes an:

Folgendes funktioniert:

1.) Die oberen Menüschaltflächen sind sichtbar und werden richtig hervorgehoben

2.) Die Menüschaltflächen sub sind erst sichtbar, wenn auf das Menü top geklickt wird

Folgendes muss funktionieren:

1.) Wenn Sie auf ein Untermenü klicken, suchen Sie nach einer neuen Seite, um das ausgewählte Untermenü geöffnet zu halten.

Den Code finden Sie hier: http://jsbin.com/ePawaju/1/edit

oder hier: http://www.ceramictilepro.com/_6testingonly.php#

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

Muss ich dieses Skript in den Head-Abschnitt einfügen? Wo ist der beste Ort?

<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 ist neu für mich, jede Hilfe wäre sehr dankbar:) var-Untermenü;

$('.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);
});
0
user2844139

Normalerweise würde ich das auf der Server-Seite erledigen (also PHP, ASP.NET usw.). Die Idee ist, dass der Server beim Laden der Seite den Mechanismus steuert (möglicherweise durch Festlegen eines CSS-Werts), der im resultierenden HTML-Code wiedergegeben wird, den der Client sieht.

0
Didaxis

Versuchen Sie es mit 

a:active{
font-weight: bold;
}

in Ihrer CSS-Datei.

0
Diablo

Normalerweise benutze ich eine Klasse, um dies zu erreichen. Es ist sehr einfach, irgendetwas, Navigationslinks, Hyperlinks usw. zu implementieren.

In Ihr CSS-Dokument einfügen:

.current,
nav li a:hover {
   /* styles go here */
   color: #e00122;
   background-color: #fffff;
}

Dadurch wird der Hover-Status der Listenelemente mit rotem Text und weißem Hintergrund angezeigt. Hängen Sie diese Stromklasse an einen Link auf der "aktuellen" Seite an, und es werden dieselben Stile angezeigt.

Im HTML-Einfügen:

<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>
0
David Berning

Sie können Javascript verwenden, um Ihr DOM zu analysieren und den Link mit demselben Label wie die ersten h1-Tags hervorzuheben. Aber ich denke es ist übertrieben =)

Es ist besser, eine Variable festzulegen, die den Titel Ihrer Seite enthält, und damit eine Klasse unter dem entsprechenden Link hinzuzufügen.

0
Habax

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>
0
Sapna