I understand how to create a fixed nav menu. The one I am designing has links to various anchor points on the page. What I do not understand is how to I have the menu items automatically indicate where I am on the page? Can this be done without JS?
This effect is found on many 1-page designs. For instance:
http://www.thirdculturestudios.com/
http://kevinmheineman.com/
Any help would be appreciated.
You can do the jump using <a name="resourceName" id="resourceName"> anchor tags. But the smooth scrolling to the item needs javascript.
You just use Text to just jump to it (non js world).
Edit: clarified grammar since I tried rereading it and realized it would be confusing the way I wrote it
I'm not aware of a way to do that in CSS. Both of the pages you link to involve adding/removing classes dynamically based on the click event. CSS has no way of dynamically adding classes.
If you're interested, here's how you could do the link highlighting depending on if it's clicked simply in jQuery:
<div id="container">
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 2</li>
</ul>
</div>
var a = $('#container a');
a.click(function() {
a.removeClass('active');
$(this).addClass('active');
});
http://jsfiddle.net/H5rNM/
You cannot do this without JavaScript, because CSS... well... cascades. The way those pages work is that each menu item has a class .active or similar, that is added when the item is clicked.
EDIT: I believe you're looking for jQuery's scroll() (see here) , where you can specify a function that takes place when the user scrolls. In this case, the function would check the scrollTop value and compare it to the offset of page sections, then add a class to the appropriate menu item.
A quick Google search of these terms will point you in the right direction.
No can't be done without Javascript.
Related
after I spent two hours trying to figure this out by myself, I feel it's the right time to ask people who actually know how to code.
What is my situation
I'm building a WordPress theme and I struggle to make the navigation work the way I want it. What I have in mind looks like this:
sketch of home page
Since it is WordPress menu (and because I plan to adapt the looks throughout the website), I need it to be a list. But I struggle to make the first-level items appear as headings and the second-level items as items below.
This is as far as I got:
https://jsfiddle.net/grysom/bpe924du/
I tried random stuff using flexbox properties + adding a break using :after selector with content: "\A"; but with no luck.
Do you have an idea how to do it? Is it even possible?
Thank you in advance for your ideas!
Have a nice day
grysom
You'll want the 2nd level list <ul> to be inside of the <li>:
<ul>
<li>
Pro veřejnost
<ul>
<li>Co je ergoterapie</li>
<li>Kdo je ergoterapeut</li>
<li>Seznam zařízení</li>
<li>Etický kodex</li>
</ul>
</li>
<li>
Praxe
<ul>
<li>Nabídky práce</li>
<li>Vychytávky a tipy</li>
<li>Legislativa</li>
</ul>
</li>
</ul>
I've updated your jsfiddle: https://jsfiddle.net/grysom/bpe924du/ but you'll need to adjust your styles a bit to differentiate the levels.
Logic escapes me for two days on what I'm trying to achieve, which is targeting certain class elements in the wordpress menu with CSS. It is usually simple really for me, but something (small usually) is making me battle.
I need to apply a small background image behind the menu item text to the "active" or "current" menu item. But this must apply ONLY to the parent menu items (not on any of the child/submenu dropdown items). Applying the background image is fine, so that's not the issue. It's targeting only on the parent item that's the issue.
I've tried variations of the following CSS (forgot about the background image for now, I'm keeping it simple here, to resolve the targeting) to make the current/active PARENT menu item text turn red:
.main-navigation div ul li.current-menu-parent a:not(.sub-menu)
{color: red !important;}
(I have commented out this custom CSS on the website, to prevent confusion)
The :not pseudo I thought would do the trick but it's possibly my failure at syntax, even though I googled it, to which I may learn something further about CSS today, when resolved.
It's not working how I expect it to. Any ideas? I might revert back here again if I battle with the background image, but I suspect once the 'CSS targeting' is worked out, that shouldn't be an issue to apply.
Thank you brainy people :)
The answer is more simple than you think: use the > CSS selector. See articles here and here.
For example:
Codepen
/* Target top level only */
.my_navigation > li > a {
background-color: yellow;
}
/* Or perhaps target only top-level with children */
.my_navigation > .has_children > a {
background-color: orange;
}
<div>
<h1>Only top-level parents get styled:</h1>
<ul class="my_navigation">
<li>Link 1</li>
<li class="current_link has_children">
Link 2
<ul>
<li>Link 2a</li>
<li class="current_link has_children">Link 2b
<ul>
<li>Link I</li>
<li>Link II</li>
</ul>
</li>
<li>Link 2c</li>
<li>Link 2d</li>
</ul>
</li>
<li>
Link 3
<ul>
<li>Link 3a</li>
<li>Link 3b</li>
</ul>
</li>
<li><a href="#">Link 4</li>
</ul>
</div>
Using Javascript (e.g. jQuery) is overkill in this case. It would be a different story if you're using an eventlistener and need to get the parent of the clicked target; in that case you DO need JS because as others have mentioned CSS doesn't yet have a parent selector yet (but it seems like it's coming in CSS4).
However here you just need to style items on page rendering, and WP provides plethora of classes to work with. Also: Do a Google search for "wordpress menu class walker function" and you can generate some more classes, like identify each level of menu e.g. ".top-level", ".second-level", etc.
try below, this will select the a tag which is direct child of li.current-menu-parent.
.main-navigation div ul li.current-menu-parent > a{color: red !important;}
Seems jQuery was the way to go for the solution, based on the thread Is there a CSS parent selector? posted by #Paulie_D, thank you!
My jQuery solution below targeting only the active parent menu item and inserting a small background image on the <li> menu tag. You can see the yellow 'paint swish' image happening in the screenshot below.
The .not is used to exclude targeting the dropdown submenu items (their class is .sub-menu):
$('.main-navigation .current-menu-item, .main-navigation .current-menu-parent').not('.sub-menu li').css(
{
'background-image':'url(PATH TO YOUR IMAGE HERE)',
'background-size': '100% 50px',
'background-repeat': 'no-repeat',
'background-position': 'center'
}
);
Thanks for your input. I learnt something today.
I have built a CSS Sprite Navigation. The Navigation functions fine unless you have the UL list in a differnt order than the style sheet, or don't use all of the li elements.
You can see the examples here:
http://www.reneebuller.com/_temp/navigation.html (works)
http://www.reneebuller.com/_temp/navigation1.html (nav2 and nav3 are switched)
(Then go to nagvigation2.html nav 2 is deleted... sory I can't post another link because I'm a newbie and limited to two)
You will see in the later two examples that something happened with text. I can't figure out what is goin on.
You need to change the name of the IDs as well. This is bugged:
<li id="navThree"><a class="" href="#">Two</a></li>
This will work just fine even if inverted:
<li id="navThree"><a class="" href="#">Three</a></li>
<li id="navTwo"><a class="" href="#">Two</a></li>
You don't have any of the CSS in the second example that was used in the first.
Hi i have seen you have made totally image based navigation i think you can easily make this navigation through pure css and than you can make changes easily in css navigation.
please check i have made pure css based navigation similar like your navigation i hope this will help you:- http://jsfiddle.net/YRjE8/10/
Is there a way (or component i could use) to output a simple menu.
I just need it output as a list, like you would use for a simple superfish menu.
I've looked at the menu control and cssadapters (css friendly) which kind of works,
except there is a lot of styles and javascript output with the menu which is destroying the look.
If I can't find something that outputs a clean list, my next option is to craft some jquery to delete these styles. This is not my preferred option. If you have a better idea, please let me know.
Just something that looks like this:
<ul> Main Menu
<li> hi </li>
<li> second menu
<ul>
<li> in second menu </li>
<li> hi there </li>
</ul>
</li>
</ul>
Thanks.
You can use the Repeater server control. You are in control of all of the markup output to the screen.
I'm following this tutorial here http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery on adding a menu with jquery.
I've created my menu, but I'm having trouble adding it to wordpress. I opened up the header.php file since I want it to appear below the banner, and I paste it in it's own div, but it always "pushes" everything below it to the right.
How do I stop it from doing this?
Here's the code:
<ul id="nav">
<li>1 HTML</li>
<li>2 CSS</li>
<li>3 Javascript
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
Hard to say without looking at the whole, but based on knowing very little of your problem, the only thing I can recommend you to try is this CSS property:
ul#nav {
position: absolute;
}
This way, it will not push other elements away. It might have other consequences tough, depending on other elements you might have.
Looks like you're missing a closing </ul>? You can also use The W3C Markup Validation Service to tack down errant tags.