I've created my navigation menu using CSS and an image sprite for the rollover states (i.e hover, active). However, I'm trying to create a 'selected/current' state (which in my case is the same as the active state) so that dependent on the page you've selected, the corresponding navigation button is highlighted.
Here's what I have:
CSS:
#menu li {
margin: 0;
padding: 0;
height: 50px;
list-style: none;
display: inline;
float: left;
line-height: 40px;
}
#menu a {
display: block;
height: 50px;
}
#menu a:hover {
background-image:url(../Images/about_rollover.gif)
}
#about {
width: 90px;
}
#about a:hover {
background-position: 0 -50px;
}
#about a:active {
background-position: 0 -100px;
}
#about a:selected {
background-position: 0 -100px;
}
#portfolio {
width: 90px;
}
#portfolio a:hover {
background-position: 90px -50px;
}
#portfolio a:active {
background-position: 90px -100px;
HTML:
<ul id="menu">
<li id="about"><a href"#"></a></li>
<li id="portfolio"></li>
</ul>
Image sprite: view here
One way to solve this would be to put a class on the body tag that identifies the page you are currently browsing, and applying the selected state to the nav item when it falls under that particular class. Like:
HTML:
<body class="about">
<ul id="menu">
<li id="about"><a href=...
CSS:
body.about ul li.about { [selected background position] }
First:
You use some language at the server level to implement the site?
If so, it would be interesting to check the page that is selected and add a specific class to mark it, for example (via php):
<ul id="menu">
<li id="about"<?php echo $accessedPage == 'about' ? ' class="selected"' : ''; ?>><a href"#"></a></li>
<li id="portfolio"></li>
</ul>
Second:
You can group a css selector to hover and selected:
#about a:hover,
#about .selected a {
background-position: 0 -50px;
}
#portfolio a:hover,
#portfolio .selected {
background-position: 90px -50px;
}
You will need to look at the current path some type of application logic, not strictly CSS.
For example you can use javascript:
$('document').ready(function () {
//Gets the current window location
var currentPath = window.location.pathname;
/*Logic to identify where the user is relative
to your webpage and update the style*/
if (currentPath = '/portfolio')
{
$('portfolio').addclass('menuactive');
}
});
You will have to add classes define the states for your different menu items. But this should get you in the right direction.
Related
I have built this Vertical Menu with hidden submenus however I cannot get the submenu to display when the user hovers. How could I go about doing this? Also how can I get the text to be formatted all the way left, since they are lists I can get rid of the bullets, however I cannot get the text to go where the bullets used to be. Also, I am wondering what the best way would be to set the width of the "main-nav". I don't want anything to be over the text except the logo. The body of the site would be next to the navigation. I want the side of the logo to also line up with the left side of the text, and I cannot figure out how to do this. The red border is just for testing purposes (obviously).
Here is the link to my codepen.
[BONUS] I am trying to create my own site from scratch with wordpress and a custom theme. How does one create it so that the logo image is taken from the site identity tab in the customize sidebar? And also just display text if no logo is chosen in the identity bar. Would it be some wordpress php function? Also, I would want the logo to be apart of the main-navigation by default. I have the register_nav_menu() function in my functions.php file and it assigns a menu to Main Navigation, also giving it a class main-navigation. How could I get the logo to by default appear above this menu? Any tips on this would be greatly appreciated. (Wordpress/coding noob here)
HTML:
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview</li>
<li>About</li>
<li>Submenu</li>
<ul class="sub-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<li>Contact</li>
</ul>
</nav>
CSS:
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li, .main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover, .main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation .sub-menu:hover {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
JS:
/* No JS */
I believe that this is your desired behaviour?
To do this, you need to place your ul submenu inside the li for the menu item that is displayed. This is the only change I made to the HTML.
You can then add a CSS rule so that when you hover over the li, its ul child becomes visible. i.e: .main-navigation li:hover {display: block; }.
The reason it didn't work when you did .main-navigation .sub-menu:hover is because when it is not being displayed, you cannot hover over it, so the hover state is never triggered. In the rule which I added, it is triggered when you hover over the containing li.
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li,
.main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover,
.main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation li:hover ul {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview
</li>
<li>About
</li>
<li>Submenu v
<ul class="sub-menu">
<li>Item 1
</li>
<li>Item 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
EDIT: I may have made a mistake regarding WordPress, so I deleted that part of the answer so that I do not mislead anyone. E. Shio, however, found a link which explains it almost step by step. I'll summarise what this link says, just in case it someday gets deleted or the page url gets moved.
First, you check if there is a custom logo, for which you use has_custom_logo (). You then output that custom logo with the_custom_logo(). This is a relatively new feature to Wordpress though, so to maintain backwards compatibility, you should check if the function exists with function_exists( 'the_custom_logo' ). If there was no custom logo, you can output the text to display inside an else statement. Here's an example:
if( function_exists('the_custom_logo') ) {
if( has_custom_logo() ) {
the_custom_logo();
} else {
$blogname = get_bloginfo('name');
echo "<h1>$blogname</h1>";
}
}
If you have any questions about the CSS for the menu, I'm more than happy to help! (I'm no expert in Wordpress though, so I probably can't help with any Wordpress specific things, but I can try! XP)
I'm trying to make my website accessible via mobile and have arranged it so below a certain size the menu bar at the top turns into a dropdown. Unfortunately it works with hover so when I try to use it on my mobile nothing happens at all. Can anyone suggest how I would alter the code to make it work with touch?
html
<nav id="nav_mobile" role="navigation">
<ul>
<li>Home</li>
<li>News</li>
<li>Gallery</li>
</ul>
</nav>
CSS
#nav_mobile {
position: relative;
padding-top: 2%;
margin: 0px auto;
}
#nav_mobile ul {
width: 100%;
text-align: center;
position: absolute;
background: #F8F8F8;
min-height: 50px;
background-image: url('../img/Menu_button.png');
background-repeat: no-repeat;
background-position: 50% 0%;
}
#nav_mobile li {
display: none;
margin: 0;
border-bottom: 1px solid #ceced6;
background: #070707;
}
#nav_mobile #current {
display: block;
}
#nav_mobile a {
display: block;
}
#nav_mobile #current a {
background: none;
color: #666;
}
#nav_mobile ul:hover {
background-image: none;
}
#nav_mobile ul:hover li {
display: block;
}
Happy to include jQuery in the code if I need to but I'd like to keep it to just css if I can.
EDIT
I've changed the hover to active and added ontouchstart="" to the body tag. The result is the menue now activates but doesn't stay active long enough for you to select a link.
use the :active pseudoclass. It should work, but in some browsers you need a small hack to make it work : attach an event handler to the touchstart event on the body (ex:<body ontouchstart="">)
You could create 2 separate menus - one for regular screens and one for mobile and do something like this:
#nav_mobile {display: none;}
#media (max-width: 480px) {
#nav_mobile {display: inline-block;}
#nav_regular {display: none;}
}
I am still pretty new to coding and feel proud of my progress. I have searched and searched to no avail for a solution to my problem. My navigation tabs work correctly, but I can't seem to figure out how to make my active page tab be the same color as the hover color. I used the code from an article at http://blixt.org/articles/tabbed-navigation-using-css#section=introduction. I contacted the author, but have not received a response from him. The only solutions I have found entail completely changing my code to one without using the tabs. I have tried working within the "inspect element" feature, but have made no progress. My webiste is http://actonrecovery.com/. Please help if you can.
Here is my html code:
<!--my ordered list for a table of contents TOC-->
<ol id="toc">
<li><a href="recovery.html" id=“recovery”><span>Coach</span></a></li>
<li><a href="coaching.html" id=“coaching”><span>What Is Coaching?</span></a></li>
</ol>
Here is my css:
/*style the default state for each list item (tab) inside the TOC*/
ol#toc { height: 2em; line-style: none; margin: 0; padding: 0; }
/*padding the left part so it won't be covered by the background image of the <a> element*/
ol#toc a { background: #bdf url(tabs.gif); color: #008; display: block; float: left; height: 2em; padding-left: 10px; text-decoration: none; }
ol#toc a:hover { background-color: #3af; background-position: 0 -120px; }
ol#toc a:hover span { background-position: 100% -120px; }
ol#toc li { float: left; margin: 0 1px 0 0; }
/*offset the tab image when a tab is selected*/
ol#toc li.current a { background-color: #48f; background-position: 0 -60px; color: #fff; font-weight: bold; }
ol#toc li.current span { background-position: 100% -60px; }
ol#toc span { background: url(tabs.gif) 100% 0; display: block; line-height: 2em; padding-right: 10px; }
According to your css, you should add class current to li
<ol id="toc">
<li><span>Coach</span></li>
<li class="current"><span>What Is Coaching?</span></li>
</ol>
Also, your id has some other type of quote(” ”), change it to normal quotes(" ")
You can easily add your 'current' class with the same background color as your hover pseudocode. I created a jsfiddle to show you what I mean.
HTML:
<ol id="toc">
<li><a href="recovery.html" id=“recovery”><span>Coach</span></a></li>
<li><a href="recovery.html" id=“recovery”><span>Coach</span></a></li>
<li><a href="recovery.html" id=“recovery”><span>Coach</span></a></li>
<li class="current"><a href="coaching.html" id=“coaching”><span>What Is Coaching?</span> </a></li>
</ol>
CSS:
li {
background: #bdf;
color: #008
}
li:hover {
background: #48f;
}
.current {
background: #48f;
}
http://jsfiddle.net/rynslmns/A29cC/1/
You would need to add your current class to your html for the current page you would like to show 'current'
On the tab that is active, just it's class to "active" or whatever else you want to call it.
Like this:
HTML:
<!--my ordered list for a table of contents TOC-->
<ol id="toc">
<li><a href="recovery.html" id=“recovery”><span>Coach</span></a></li>
<li class="active"><a href="coaching.html" id=“coaching”><span>What Is Coaching?</span></a></li>
</ol>
CSS:
li
{
background: #bdf;
color: #008
}
li:hover
{
background: #48f;
}
.active
{
background: #48f;
}
That is what I did for my website.
If you just have a static HTML and CSS page you could add the .current class to the current pages tab. For example on the home page add the current class to the home page tab, etc. etc.
I am trying to get my navigation bar to have a current page indicator and I have researched every article possible, as well as, followed exact examples, but it still will not work.
I am using a sprite image of only two images. The image is width of 480, height 40 with each image at width 240, height 40. One side is blue and the other side is yellow.
I want to have the off-state to be the blue side, and then have the hover, active and current state be the yellow side. However, I dont care to have an active state at the moment.
So, my question is: my off state(blue side), hover state(yellow side) work perfect. I just need my current state(yellow side) to work. So, when you click on the menu item the image stays yellow.
I apologize for any horrible coding, as this is my first attempt
This is a portion of what I have for my html: (I will use just one of the three menu items, profile.)
<body bgcolor="CEB86C"; class="profile">
<div id="navigation">
<ul>
<li><a class= "news" href="news.html" title"news"></a></li>
<li><a class="profile " href="index.html" title"profile"></a><li>
<li><a class= "about" href="about.html" title"about"></a><li>
</ul>
</div>
Here is the CSS:
#navigation ul {
list-style: none;
text-align: center;
}
#navigation li {
display: inline;
}
#navigation li a {
text-indent: -5000px;
display: inline-block;
height: 40px;
}
#navigation li a.profile {
width: 240px;
background: url(images/profile.jpg);
text-decoration: none;
}
#navigation li a.profile:hover {
background: url(images/profile.jpg);
background-position: -240px;
text-decoration: none;
}
#navigation li a.profile:current {
background: url(images/profile.jpg);
background-position: -240px;
background-repeat: no-repeat;
text-decoration: none;
}
I appreciate any input and thank you in advance!
Assuming that you change the class on the body depending on which page you are on then you can just modify the last css declaration to read:
.news #navigation li a.news,
.profile #navigation li a.profile,
.about #navigation li a.about {
background:url(images/profile.jpg);
background-position: -240px;
background-repeat: no-repeat;
text-decoration:none;
}
Edit - if you have 3 separate images then you could do something like:
.news #navigation li a.news {
background:url(images/news.jpg);
background-position: -240px;
background-repeat: no-repeat;
text-decoration:none;
}
.profile #navigation li a.profile {
background:url(images/profile.jpg);
background-position: -240px;
background-repeat: no-repeat;
text-decoration:none;
}
.about #navigation li a.about {
background:url(images/about.jpg);
background-position: -240px;
background-repeat: no-repeat;
text-decoration:none;
}
Try #navigation li a.accountbutton:active instead of :current
I want to set an active class for a CSS image menu. I tried to set the active selector to be the same as the hover selector, but it didn't work.
CSS
#menu li a.fooa {
background-image: url(/images/foo_a.png);
height: 20px;
width: 20px;
}
#menu li a.foob {
background-image: url(/images/foo_b.png);
height: 20px;
width: 20px;
margin-left:-8px;
}
#topmenu li a:hover, #topmenu li a:active {
background-position: left bottom;
height: 20px;
width: 20px;
}
HTML
<ul id="foo_menu">
<li></li>
<li></li>
</ul>
(I have 2 classes for each href because I'm using the qtip2 popups. I've tried to set the active class without including the 2nd (qtip2) class, but haven't been able to get the active class to work that way either.)
the pseudo-selector :active doesn't set an element to active. It Selects the active link, which means only the time, when the mouse is clicked on the element until it's released!
What you need ist to apply an class="active" on your element:
When link #1 is active:
<ul id="foo_menu">
<li></li>
<li></li>
</ul>
And CSS changes to:
#topmenu li a:focus,
#topmenu li a:hover,
#topmenu li a.active {
background-position: left bottom;
height: 20px;
width: 20px;
}