CSS Nav Menu Set effet sur l'élément actuel

-1

Je développe un site Web de http://hcldesign.co.uk/ et ai ajouté un effet de menu nav que j'ai trouvé et intégré sur mon site en utilisant CSS.CSS Nav Menu Set effet sur l'élément actuel

Le seul problème est que je n'arrive pas à comprendre comment conserver l'effet de survol lorsque je clique sur l'élément de menu et que l'effet de survol apparaît également sur l'élément de menu/page en cours/actif. Quand j'ajoute le code je pense qu'il devrait être tel que: Actif ceci brise l'effet de survol de menu.

Code actuel utilisé pour le menu est inférieure

`a:focus { 
    color: #c9c9c9 !important; 
    text-decoration: none; 
    } 

    #menu-primary-menu { 
    font-family: 'roboto', roboto, roboto; 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: 500; 
    letter-spacing: 1px; 
} 
#menu-primary-menu * { 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-transition: all 0.35s ease; 
    transition: all 0.35s ease; 
} 
#menu-primary-menu li { 
    display: inline-block; 
    list-style: outside none none; 
    margin: 0em 1.5em; 
    padding: 0; 
} 
#menu-primary-menu a { 
    padding: 0.25em 0; 
    color: #fff; 
    position: relative; 
    text-decoration: none; 
    display: inline-block; 
} 
#menu-primary-menu a:before, 
#menu-primary-menu a:after { 
    height: 3px; 
    position: absolute; 
    content: ''; 
    -webkit-transition: all 0.35s ease; 
    transition: all 0.35s ease; 
    background-color: #3588dc; 
    width: 0; 
} 
#menu-primary-menu a:before { 
    top: 0; 
    left: 0; 
} 
#menu-primary-menu a:after { 
    bottom: 0; 
    right: 0; 
} 
#menu-primary-menu a:hover { 
    color: #fff; 
} 

#menu-primary-menu .active a { 
    color: #fff; 
} 


#menu-primary-menu a:hover:before, 
#menu-primary-menu .current a:before, 
#menu-primary-menu a:hover:after, 
#menu-primary-menu .current a:after { 
    width: 100%; 
} 

#menu-primary-menu a { 
font-size: 14px; 
margin: -10px 
}

Toute aide sera appréciée.

Merci

Source

2017-08-10 Harvey

Tout d'abord, veuillez lire [ask]. Ensuite, éditez votre question pour nous montrer le code pertinent. – CBroe

Code actuel ajouté, désolé – Harvey

Étant donné que vous ne naviguez pas vers d'autres pages ici, mais que vous utilisez uniquement des liens d'ancrage dans la même page, le mécanisme WP par défaut qui marque l'élément en cours ne s'applique pas. Vous devez d'abord ajouter du code JavaScript qui définit une classe sur l'élément "en cours" lorsque vous cliquez dessus. – CBroe

Donnez à chaque <body id="mypage-one"> un id. Vous devez également donner votre <nav> article comme <li id="nav-page-one"> un id ainsi.

Si vous allez maintenant dans votre css de cette façon, vous aurez l'effet que vous souhaitez.

#mypage-one, #nav-page-one { 
    background-color: #2a88bd; 
} 

#mypage-two, #nav-page-two { 
    background-color: #2a88bd; 
}

Si vos sélecteurs CSS séparées par des virgules correspond maintenant, vous obtiendrez le background-color ensemble à #2a88bd ou comment jamais votre effet de vol stationnaire est.

J'espère que vous réussirez.

Source

2017-08-10 10:40:51

Salut, Serait-il possible d'acheter # nav-item-101 {background-color: # 2a88bd; }? Comme mes articles Nag ont juste un numéro aléatoire attribué automatiquement et je ne sais pas comment ils sont modifiés dans WordPress. Ceci est un site web d'une page avec seulement quelques autres pages réelles qui seront ajoutées, aurais-je besoin d'un tag de page? et si oui, où puis-je trouver l'étiquette de la page? – Harvey

Salut, je viens d'ajouter mon code actuel, j'en ai besoin pour montrer les lignes de l'effet hover quand on clique sur l'élément nav – Harvey

Dans le cas contraire, vous devez changer le '# menu-primary-menu a' de cette façon 've worte avant.Utilisez simplement votre outil de développement dans votre navigateur et étendez-le. Vous trouverez des choses incroyables! –

Je pense que lorsque vous utilisez nav de défilement, il est difficile de le faire comme ci-dessus. Vous pouvez utiliser jQuery pour atteindre votre objectif. Regardez sur cette codepen comment cela fonctionne:

https://codepen.io/anon/pen/EvXVXm

$('.link').on('click', function(event) { 
    $('.link').removeClass('active'); 
    $target = $(event.target); 
    $target.addClass('active'); 
});

Je pense que ce sera utile.

Observe

Source

2017-08-10 10:43:55 Czeran

Quelles classes aurais-je besoin d'utiliser dans le javascript de mon code si? – Harvey

CSS Nav Menu Set effet sur l'élément actuel

Répondre

Questions connexes