Html css current page

Highlight Current Page With HTML CSS JS | Show Active Link Or Menu

I am sure that, You have seen underline on the current menu or page on mostly all websites. When we click on any websites about then an underline appears on about menu ‘s bottom section. On some websites has any special effect to indicate the current opened menu or link.

Today you will learn how to show the active link, page, or menu with an underline. You can do this using HTML, CSS, & JavaScript, After learning this you can use it everywhere like on your website or blog. Just you have to change class and id values on your navbar then your website’s menu will be like this.

So, Today I am sharing Highlight Current Page With HTML CSS JavaScript. In other words, Show active link, menu, or page. This program is pure JavaScript based program, I did not use any library. Its is a tricky program, But if you have the capability to understand the code then you will get it. Otherwise, just copy the codes and change as you want.

If you are thinking now how this active link highlighter actually is, Then see the preview given below.

Preview Of Show Active Link Menu & Page

See this video preview to getting an idea of how this looks like.

Now you can see this visually. If you like this one then get the source code of its.

Discussion About Active Link Indicator

Before sharing source code, Let’s talk about it. I created two sections one for creating a menu and other section for its page. I gave id on pages and add the id on menu’s action. For example, I put home pages ID is id= «home-id» and put on Home menu < a href="#home-id">. Now when you click home on the menu section then its automatically navigate to the home page.

I used HTML Data attribute, The data-* attributes gives us the ability to embed custom data attributes on all HTML elements (more Info). In the menu section, we store data and give unique data id to every menu using data-tab-*. I created 7 menus I put A to G in data-tab, For example, data-tab-A for the first menu and data-tab-B for the second menu.

Now in the page section, I used data attribute with data-tab-panel value. In this section, I also used A to G alphabets. Then I choose the home menu and page to active by default by putting data-active-tab=»A» . In the CSS section, I put a line for a separate menu and pages. Between the menu and page section, I put the underline effect to create the highlight.

I put a span with 3px height with a color, It’s width is decided according to the menu’s words length using JavaScript. In the main section, I put overflow-x: scroll; and overflow-y: hidden; values, creating a scroll effect. Also I put .main-options::-webkit-scrollbar < display: none; >to hide scroll bar.

In JavaScript Section, I put all controls of styling. I created variable for each section, Then it’s changed according to the environment. I create a loop to check the width of the menu’s words length and change it dynamically. There are many more commands, I can’t explain it in writing, After getting the codes you will understand automatically.

Highlight Current Page With HTML CSS JavaScript Source Code

For Creating This Program You Have to Create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.

Create an HTML file named ‘index.html‘ and put these codes given below.

Источник

3 Ways to Highlight Links to the Current Page with CSS

We suggest looking at 3 different ways to highlight links to the current page using CSS.

The first way – HTML/CSS

I noticed that WordPress automatically adds a class for the active clicked link. You can see this if you open the source code of the site.

In the source code you can see that the class “current-menu-item” has been added to the active link. This means that we can add any style to this class.

Пример:

Open the CSS file of the template and enter this code:

#menu li .current-menu-item acolor:#сс0000;>

Note: This code will work if your menu has been taken in a block like mine:

 id="menu">your menu (I displayed the menu via a widget) 

I will now share how to highlight an active link for absolutely any site using just a little JavaScript and CSS code.

2 ways on Java Script / CSS

I want to offer you ready-made code in JavaScript, which will automatically prescribe the class ” act” to the active menu link that links to the current page. This code is easily embedded in any design, template and any CMS (Joomla, WordPress, etc.).

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   body a a:hover a.act  
Link1 Link2
 try < var el=document.getElementById('msgText').getElementsByTagName('a'); var url=document.location.href; for(var i=0;i;> ;> catch(e)<>  

Note paragraph 5 to 10 in the code.

Here you change the appearance of the menu, using the knowledge of CSS.

There is another way of solving this problem, also using JavaScript.

window.onload = clearCurrentLink; function clearCurrentLink()< var a = document.getElementsByTagName("A"); for(var i=0;i

Whichever way you prefer, that’s your choice.

Источник