Please help solve the problem, because my ideas have been exhausted...(
I have a :
<nav class="nav_editor" ng-show="status.editorMenuOn">
<ul class="menu_editor">
<li class=""><a ng-href="/articles/user/{{ status.userID }}">My Articles</a></li>
<li class="">Create Article</li>
<li class="">Comments</li>
</ul>
</nav>
And a CSS classes:
.menu_editor li a {
color: rgb(125,125,125);
font-size: 1.25vw;
margin-right: 20px;
text-decoration: none;
}
I want to make highlighting the item in the menu when this page is active (not pseudo ":active"), just when someone watching current page, for example "My Articles".
I have tried about 3 variants by CSS/HTML only, JavaScript and jQuery, but it is either not working properly or not working at all.
Please help solve this problem.
Thank you in advance!
When the myArticle page loads, just do jquery addClass method.
$(document).ready(function(){
//remove highlighted menu buttons on pageload
$(".menu_editor li").removeClass("activeMenuItem");
//add class only to the specific one
$(".foo").addClass("activeMenuItem");
});
Related
I am looking to make some CSS adaptions to this site:
www.cocoto.eu
I want to change the hover color of the main nav menu items (for example "Versandkosten").
Can anyone show me the code that i need to use to achieve that? cause i am not able to find it
Thanks and sorry for this beginner question.
<ul class="main-nav">
<li class="nav-item">
<a class="nav-link">ES24</a>
<a class="nav-link">Versandkosten</a>
</li>
</ul>
So here by using the following syntax : class1>class2>class3, you can style the link on hover as wanted.
.main-nav>.nav-item>.nav-link:hover {
color: red;
}
Check this link for details of different states of a link :
https://www.w3schools.com/css/css_link.asp
<a onMouseOver="this.style.color='#FF4223'"
onMouseOut="this.style.color='blue'"><u>Hower me</u></a><br>
.main-nav>.nav-item>.nav-link:hover {
color: yellow;
}
I have problem with with adding the hover.css effects, which I get from here.
First, here is the sample HTML that I have created.
In the NAV BAR you will see two Personal button. One is with the hover effects and another one is without the hover effects but with the Mega Dropdown Menu.
Second, what I'm trying to do is to add the hover effects into the second Personal button.
<li class="droppable nav-item pos-menu hvr-sweep-to-bottom">
<a class="nav-link personal-hover" href="#">Personal</a>
<div class="mega-menu personal-menu-content">
...
</div>
...
</a>
</li>
Every time I try to add hvr-sweep-to-bottom class into the <li>, the drop down menu will always gone.
Here's the HTML directory file in case you want to access to the .css/.js.
Hope someone can help me with this, with many many Thanks! :D
You need to do two things
Remove the padding from the .pos-menu element that is your <li>. This will ensure the <a> tag inside gets full width.
.pos-menu {
border: 1px solid #DF1E34;
border-radius: 50px;
margin-right: 10px;
overflow: hidden;
}
Update your HTML like below. The hvr-sweep-to-bottom should be on the <a>.
<li class="droppable nav-item pos-menu">
<a class="nav-link personal-hover hvr-sweep-to-bottom" href="#">Personal</a>
<div class="mega-menu personal-menu-content">
...
</div>
...
</li>
To maintain the hover effect if cursor remains inside the mega-menu
.pos-menu:hover .hvr-sweep-to-bottom {
background: rgba(0,0,0,.7);
}
Hope it helped.
I always wondered how to get rid of the dotted border that covers active links right afer clicked.
I tried a:active { border:0;outline: none; } and it didn't work. I don't think that is a border, that's something chrome adds, also firefox and ie add it their own shape.
Any help would be truly appreciated.
my code :
<ul class="footer-links">
<li id="main" class="icon-bookmark">help</li>
<li class="icon-pencil">new topic</li>
<li class="icon-chat">contact</li>
<li class="icon-search">search</li>
<li class="icon-flag">report</li>
</ul>
My link if needed : http://dvforum.elegance-style.com
Screenshot:
Use the :focus class.
a:focus{ outline:none; }
You should however, consider adding alternative styles to this class, as purely disabling it will hinder usability.
I've managed to put a great looking menu togheter!`
<li class="huvudmenu">Framsida</li>
<li class="huvudmenu">
<a>Om oss</a>
<ul>
<li>Styrelsen</li>
<li>Historik</li>
<li>Stadgar</li>
<li>Topeliuspriset</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li class="huvudmenu">Verksamhet
<ul>
<li>Hangö seminariet</li>
<li>Årsberättelser</li>
</ul>
</li>
<li class="huvudmenu">Estholmen</li>
<li class="huvudmenu">Bli medlem</li>
`http://jsfiddle.net/hx6uvc19/ The setup I have does not, unfortunatley, work very well on touch screen devices. Is there any way I can keep the design while making it touch screen compatible?
Thanks!
You can not use the :hover pseudo class on mobile. In order to get this effect you can use JQuery as stated by #jbutler483 in the comments.
If you wanted to do this you could do it by adding an .active class to the main li's (By using the class .huvudmenu) on click/touchstart and add this to the css where you have your hover styles as well.
This is the JQuery:
$('.huvudmenu').on('click touchstart', function(e){
e.preventDefault();
$(this).toggleClass('active').siblings().removeClass('active');
});
and the styles to add are:
nav ul li.active > ul {
display: block;
}
and
nav ul li.active:after {
width: 100%;
background: #404040;
}
this will then allow the styles on click and touchstart events. If you wanted this to only run on mobile you could just remove the click and use touchstart events and/or put some kind of detection that this is a mobile device before initialising the JQuery function.
Here is an update to your fiddle: http://jsfiddle.net/lee_gladding/hx6uvc19/3/
I have a menu bar which uses the below code, when the title list items are clicked they call the showHide function to change the class of the inside list to one with display block instead of none.
On ie6 and ff it works fine, chrome opera etc etc. But on ie7 the inside list is render under the other elements in the main list. Everything i try seems to break on of the other browsers.
Any help much appreciated.
<ul id="FOOMENU" style="list-style-type: none; padding-left: 10px; text-decoration: none;">
<li class="navItemsHeader"><b>View by..</b></li>
<li>
<b><a style="text-decoration:none;" href="javascript:void(0);" onclick="showHide('foobarMenu');">foobar..</a></b>
</li>
<li id="foobarMenu" class="hideMenu">
<ul style="list-style-type:none; padding-left:10px; text-decoration:none; ">
<li>DYNAMIC LIST OF LINKS HERE.</li>
</ul>
</li>
I would get to grips with a javascript library like jQuery, as it will take care of all the cross-browser issues for you, and has such useful methods as toggle() to show and hide elements.
The jQuery code would be something like
$(".hideMenu").click(function() {
$(this+"> ul").toggle();
});
Also, if you wanted to hide previously shown submenus you would use this:
$(".hideMenu").click(function() {
$(".hideMenu > ul").hide();
$(this).children("ul").show();
});