All geek questions in one place

Can this navigation be fully done in CSS?

I'm a little stuck. I created almost everything in the picture below. I'm stuck in trying to figure out how I would configure it so that when the user clicks on one of the links, the line gets lower (after loading the next page). Obviously, I will need to use jquery to detect the page, and then add inline css, but I'm afraid that I want it to be as simple as possible, so that I can provide this template to others, and then they can add or remove elements as necessary. I tried to find out if I can somehow use the li element for this, but have not yet found a way. Anyone have any ideas to help me?

enter image description here

+6
source share
3 answers

Create your menu like this in HTML:

 <body id='Search' > <div id='menu'> <div class='bars'></div> <a href='/home/' title='Home'>Home</a> <a href='/community/' title='Community'>Community</a> <a href='/search/' title='Search'>Search</a> <a href='/contact/' title='Contact'>Contact</a> <div class='bars shift'></div> </div> </body>

Note that the body tag has a page id (as Cody suggests). Also note that this identifier must be the same as the value of the title attribute for the menu link.

Then use this CSS:

 .bars {border-top:1px solid #CCC;border-bottom:1px solid #CCC;height:5px;} .shift {margin-top:-6px;} #menu {font-family:arial;font-size:12pt;text-align:center;} #menu a {display:inline-block;padding:7px;text-decoration:none;color:#000;} .active {border-bottom:5px solid red;}

Finally, add this jQuery to each page:

 $(document).ready(function(){ var id = $('body').attr('id'); $('#menu a').each(function () { var title = $(this).attr('title'); $(this).removeClass('active'); if (title == id) $(this).addClass('active'); }); });

You can see a demonstration of live scripts here . (To check, just change the identifier of the body element and press run.)

EDIT: The advantage of this method compared to the Cody Grays method is that you do not need to change CSS every time you change HTML, when you add, remove or edit a menu item. On the other hand, it uses jQuery. However, if you want a clean css solution, just remove jQuery and the body element identifier, and instead directly apply the .active class to a specific link, depending on the specific page (similar to jackJoe's suggestion).

This can be easily changed if you must use <li> elements.

+1
source

You can do this as jackJoe suggests , and set the server side of the active class on the currently selected page, but you can also do this with pure CSS and a little preliminary planning.

This includes setting the id attribute for the <body> your page first, which is good practice anyway. Then your CSS file will use this id body to determine which <li> should be displayed as "active".

Example page code:

 <body id="main"> <!-- change this id for each page --> <ul> <li class="main-nav"><a href="#">Main</a></li> <li class="community-nav"><a href="/community">Community</a></li> <li class="search-nav"><a href="/search">Search</a></li> </ul> </body>

CSS example:

 li.main-nav, li.community-nav, li.search-nav { background: #FFF; /* your other awesome styles */ } #main li.main-nav, #community li.community-nav, #search li.search-nav { /* style the active tab differently */ background: #F00; }

Thus, the HTML code for the navigation section can remain completely static on every page. It should not be displayed on the server side or dynamically changed on the client side.

There's a good review of this technique, available on CSS tricks: Your body ID for more control and CSS specifics

+3
source

It is pretty simple. Create a class for the "active" state and configure it:

 <li class="active">Home</li>

and style (depends on the HTML structure, but you get the idea)

CSS

 .active { border-bottom: 3px red solid; }

All you have to do is place the class when the page loads (e.g. server side)

+2
source

Source: https://habr.com/ru/post/911536/

More articles:


All Articles