I'd like to write something like that:
.block__element--modifier .blok {
/*styles*/
}
The thing is I don't know if above way is right in BEM methodology which I use. In practice I'm creating a navigation for website which is going to be opened by hamburger-button. When user click the button (and the navigation is closed and invisible) then menu is going to be show (and in main navigation block will be added the other navigation--opened class). Something like the following:
<nav class="navigation navigation--opened">
<ul class="navigation__list">
<li class="navigation__item">
<a class="navigation__link" href="#">Link 1</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">Link 2</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">Link 3</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">Link 4</a>
</li>
</ul>
<button type="button" class="hamburger">
<img src="obrazek.png" alt="Button to open menu" class="hamburger__icon hamburger__icon--opened">
<img src="obrazek.png" alt="Button to close menu" class="hamburger__icon hamburger__icon--closed">
</button>
</nav>
When the navigation--opened class exists that means the menu has been opened. So now I want to style opened menu. To make it I'm writing the follow:
.navigation--opened .navigation__list {
/*styles*/
}
.navigation--opened .navigation__item {
/*styles*/
}
.navigation--opened .navigation__link {
/*styles*/
}
I make it to style opened menu and its components.
Is .block__element--modifier .blok {/*styles*/} way proper in BEM? Thank you in advance for answer.
It's fine to style block's child elements by modifier of the parent block. So
.navigation--opened .navigation__list {
/*styles*/
}
.navigation--opened .navigation__item {
/*styles*/
}
.navigation--opened .navigation__link {
/*styles*/
}
is fine.
But it's better to avoid styling other blocks using nested selectors.
See https://en.bem.info/methodology/css/#nested-selectors for more info.
Related
So I have multiple LI's like below as it's a menu and I am trying to create a drop-down but for some reason, my jQuery code is not working. Can someone help me?
FYI I can't change HTML as it's dynamically generating in Shopify. I can only change jQuery and CSS
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
$( document ).ready(function() {
$("ul.subLinks").addClass("inactive");
});
$('a.site-nav.lvl-1').click(function() {
$(this).find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
Your issue is $(this).find... in the a click handler - at this point, this is the a.
.find() looks at the selectors children - but the menu is not a child of the a, it's a sibling.
Change to
$(this).closest("li").find("ul.subLinks"...
(maybe $(this).next().toggleClass... with a caveat on .this() that it's always the very next element).
Updated snippet:
$('a.site-nav.lvl-1').click(function() {
$(this).closest("li").find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
</ol>
I am making a Hamburger menu for my Angular practice (version 13).
When I click on the hamburger icon it hides and opens the menu (toggle), but I also want to hide the menu after I clicked on one of the elements (Home,About me,My work).
My planned solution is to hide the nav class if I click on one of the nav__item classes.
My Header Component:
Html:
<header>
<div class="logo">
<img src="assets/img/norberticon.png" alt="">
</div>
<button class="nav-toggle" aria-label="toggle navigation" (click)="toggleShow()">
<span class="hamburger"></span>
</button>
<nav class="nav" *ngIf="isShown">
<ul class="nav__list" >
<li class="nav__item"><a routerLink="/" class="nav__link">Home</a></li>
<li class="nav__item"><a routerLink="about" class="nav__link">About me</a></li>
<li class="nav__item"><a routerLink="/mywork" class="nav__link">My Work</a></li>
</ul>
</nav>
</header>
.Ts code that toggles the Menu:
isShown: boolean = false ; // hidden by default
toggleShow() {
this.isShown = ! this.isShown;
}
The Menu:
Adding toggleShow() function to each li element does not work?
<li class="nav__item"><a routerLink="/" class="nav__link" (click) = "toggleShow()">Home</a></li>
<li class="nav__item"><a routerLink="about" class="nav__link" (click) = "toggleShow()">About me</a></li>
<li class="nav__item"><a routerLink="/mywork" class="nav__link" (click) = "toggleShow()">My Work</a></li>
CSS3:
Create one hide and one show property as -
.hidden{
display:none;
}
.show{
display:block; //or inline etc
}
JavaScript:
const elementToBeHidden = document.
querySelector('.classselector');
const ToggleShow =()=>{
elementToBeHidden.classList.toggle('hidden');
}
This will effectively toggle between hiding and showing any element you want to as many times you want.
Note that this is just psuedocode to clear up the logic
Hope this helps you.....PEACE OuT 👍
Getting some off behaviour with my Bootstrap horizontal navigation, for some reason it seems to be adding an extra anchor link into the first <li><!-- here --></li> element.
Code:
<li class='submenu'>
<a href='#'>
<img src='{{ URL::asset('img/menu/performance.png') }}' /> Performance
<ul class='nav'>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
</ul>
</a>
</li>
What Chromes Inspector says:
<li class="submenu">
<a href="#">
<img src="https://xxxxxx/img/menu/performance.png"> Performance
</a>
<ul class="nav" style="display: block;"><a href="#">
</a><li><a ref="#">abc</a></li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
Any one got an idea's of why this is happening? I hacky fixed it with the following CSS:
.left-nav .submenu li:nth-child(2) > a:first-child {
display:none;
}
You should not have any links inside another link.
This is not valid HTML.
If the browser encounters a link tag while already inside a link tag it will add
the closing tag for the first link.
I was using links within links, causing this to happen. I have moved the secondary <ul> outside of the anchor tab and its now working.
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.
I am using Twitter Bootstrap and I want to make a group of hidden fields inside a dropdown menu:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Export
<b class="caret bottom-up"></b>
</a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a id="downloadJsonButton">Link1</a></li>
<div id="downloadFormFilesDiv">
<li class="divider"></li>
<li><a id="downloadXformsButton">Link2</a></li>
<li><a id="downloadXmlButton">Link3</a><br /></li>
</div>
</ul>
</li>
However, links inside div element looks differently than those which are outside it. I want to make them look the same (links: 2 and 3 should look like link1). How can I accomplish it?
ul li{
width: 300px;
height: 70px;
background: #000;
color: white;
}
Now the menu is look the same to link content and to none content.
Try delete the div between <li> to <li>, you got iligal use with him.
Hope i helped..