I recently get task and they explain this task in the following way
The navigation must be styled using the :hover pseudo class, while the active menu point must use the body class
my question is the second one i.e. *the active menu point must use the body class. Following is html snippet.
<body class="home">
<div id="wrapper">
<div id="nav">
<ul>
<li id="btnHome">Home</li>
<li id="btnAbout">About</li>
<li id="btnContact">Contact</li>
<li id="btnLinks">Links</li>
</ul>
</div>
</div>
</div>
How can I use body class to for menu items so when user is on home page then home link will be active using css. Same goes with the other links?
I think that means for every page the body class changes, so for the HomePage you have the class home, for the AboutPage you have the class about....
.home #btnHome {
/* active home menu code */
}
.about #btnAbout {
/* active about menu code */
}
Is that what you need?
Related
I basically want to keep the nav with all of its contents at the top of the HTML, but have it moved to the bottom of the page with CSS as I am doing mobile-first approach and want the navigation to appear at the top when I resize it to tablet or laptop. I tried using minus with bottom tag but it takes forever to get it to the bottom and does not seem to be the most efficient way to do it. Is the only way to move the context to the bottom of the page is to put it at the bottom of HTML file or is there a completely different way I should approach this?
This is what I have at the moment:
I want to move the underlined links to the bottom, my code:
#topnavigationmenu li {
display: inline-block;
list-style-type: none;
font-size: 3rem;
padding: 10px;
}
<div id="mainpage">
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
The easiest solution: You can create two instances of <nav> and show one on mobile and on desktop using media queries.
Possibly better solution: You can use Flexbox (and even CSS Grid I guess) to change the order, so let's say inside the mainpage div you have two sections the nav and a div with your page content:
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
<div class="page-content">
<!-- Content here -->
</div>
You can add display:flex; to mainpage and manipulate the order these appear on mobile vs desktop/tablet using media queries.
I'd suggest checking these articles out:
Ordering Flex Items
A Complete guide to Flexbox
I have to make a few changes to the menu of my company's website, including a dropdown menu. The thing is, our website is made with Prestashop, which kind of messed up the hierarchy of the HTML. It pretty much looks like this:
<ul class ="menu">
<li>
<a href="" class="sf-with-menu">
<ul class ="submenu">
<li>
<a href="">
</li>
<li>
<a href="">
</li>
</ul>
</li>
</ul>
I want to have the ul with the class .submenu open when I hover on .sf-with-menu, which are both at the same level in the page's hierarchy. Is that possible only with CSS? I'm very limited with Prestashop regarding the HTML, since I've read changing the HTML would basically break everything when we update our modules, so I'd like to stick to CSS only if possible.
I suppose you could use the + selector, which selects "elements that [are] placed immediately after (not inside) the first specified element," like this:
<ul class ="menu">
<li>
Anchor
<ul class ="submenu">
<li>
<a href="">One
</li>
<li>
<a href="">Two
</li>
</ul>
</li>
</ul>
<style>
.submenu {
display: none;
}
.sf-with-menu:hover + .submenu {
display: initial;
}
</style>
This applies the styles to every instance of .submenu placed immediately after .sf-with-menu, when hovering over .sf-with-menu.
It will only highlight the first instance though, as you can see in this demo, so if you have the structure:
.menu
li
.sf-with-menu
.submenu
// stuff in menu
.submenu
// stuff in menu
...then only the first submenu will be opened on hover.
See here for more CSS info.
https://i.stack.imgur.com/scn6l.png
I need to create a list with katakana, so I created a class .lisDestaq with list-style-type:katakana, but when I load the class in div it doesn't work.
.lisDestaq{
color:#2255AA;
list-style-type:katakana;
}
then on html
<div class="lisDestaq">
<ul>
<li> Death Note </li>
</ul>
but the katakana doesn't show up
I can just put in css ul{list-style-type:katakana;} and it works, but I want to set it into the class, can somebody help me? why isn't working?
https://i.stack.imgur.com/hLs7S.png
use this in your css .lisDestaq ul instead of .lisDestaq you need to set on child class also and you are just set to div class
CSS
.lisDestaq ul{
color: #2255AA;
list-style-type: katakana;
}
HTML
<div class="lisDestaq">
<ul>
<li> Death Note </li>
</ul>
</div>
You can edit or preview Here
I want to be able to change which menu item in is active depending on which file I am in. I include menu.html (the file below) in my three files: a.html, b.html and c.html.
How can I do this using only html and css? I use the Boostrap menu.
I basically want to change the menu item which is active according to the current file I am in.
<ul id="navbar_menu" class="nav nav-tabs nav-justified">
<li id="a">a</li>
<li id="b">b</li>
<li id="c">c</li>
</ul>
If I'm correct you should make an active class and added it to the actual active list-item.
To my understanding you're using PHP include for menu.
You can do this to automatically find the relevant menu to the current page:
In your 3 pages you add the "relevant class" to your div/section that is the wrapper:
<section class="a">
<!-- your php include for menu-->
</section>
Second page:
<section class="b">
<!-- your php include for menu-->
</section>
Third page:
<section class="c">
<!-- your php include for menu-->
</section>
And in your CSS:
.a > li#a {
/* Active Menu Style */
}
.b > li#b {
/* Active Menu Style */
}
.c > li#c {
/* Active Menu Style */
}
This will enable the menu for the current page with your php include file:
<ul>
<li id="a">a</li>
<li id="b">b</li>
<li id="c">c</li>
</ul>
i am building a one page layout website.
now i would like the class="footer-bar" to be position:absolute on each site, but on the #Home Page it should be position:relative.
does anyone know how to make page specific changes to each page? The Footer should not be written into each page. Only once. Only a css change if i am on page #Home.
thanks for ideas.
<ul>
<li>Home</li>
<li>Home</li>
</ul>
<ul class="tabs-content">
<li id="Home"> Content Page Home </li> ---->Footer position:relative
<li id="Other"> Content Other Page </li> ---->Footer position:absolute
</ul>
<div class="footer">Footer Content</div>
I'm not sure if I get your question, but from what I understand, wouldn't this work:
.footer-bar {
position: absolute;
/* the rest of your styles */
}
.footer-bar#Home {
position: relative;
/* anymore additional styles */
}
EDIT:
Make the #Home in the above css a .Home, and put the below jQuery into the necessary function.
$(".footer-bar").addClass("Home");
Or
$(".footer-bar").css("position","relative");
You're going to have to use something like Jquery to do this I'd imagine.
You'll need a way to identify which tab is active at any given time, so build a click event into your navigation links which will toggle an .active class to your tabs.
You can then query which tab is active, test if it's your 'home' tab, and adjust your css as necessary.
If this is a little muddy I'll whip up a fiddle for you. =)
here is how i did it:
$("#navpoint1, #navpoint2, #navpoint3, #navpoint4").bind("click", function () {
$(".footerbar").css({
position: 'absolute',
bottom: '0'
});
});