I have an html page called foo.html with a navigation bar as follows:
<ul>
<li>Home</li>
<li class="active">Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
I want this in all of the html files, so for the bar.html file it should be:
<ul>
<li>Home</li>
<li>Foo</li>
<li class="active">Bar</li>
<li>Baz</li>
</ul>
etc.
Is there anyway to automate this such that within a given file, say foo.html, it knows it is active page.
Thanks for any help here.
Related
<header>
Portfo<span>lio</span>
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="navbar">
<li>Home</li>
<li>About</li>``
<li>Coursework</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</header>
When I try to click on home about exc on my website it does not take me to it on my website and I get a error of (Your file couldn’t be accessedIt may have been moved, edited, or deleted.
ERR_FILE_NOT_FOUND)
I'am going to assume that all of your files that you're using are finishing with .html and each html file is in the same folder at same level sitting next to each other (to maintain the relative path.
So here's how you should do it.
<header>
Portfo<span>lio</span>
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="navbar">
<li>Home</li>
<li>About</li>``
<li>Coursework</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</header>
I suppose you create a different file for all your webpages in .html
For example your home page should name index.html then your should put a link like this:
<li>Home</li>
Other pages like about you should create a new file about.html then yor link it has look like this example:
<li>About</li>
all the files you created should be in the same folder with index.html wich is the main file of your website, otherwise you need to specific exactly the path to this files.
<ul class="navbar">
<li>Home</li>
<li>About</li>``
<li>Coursework</li>
<li>Resume</li>
<li>Contact</li>
</ul>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>
Portfolio
<!-- TODO: Make this a dropdown menu. -->
<ul>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
</li>
</ul>
</nav>
Given something like the above, I want to select the opening <nav> and then also select the closing <nav>, including everything in between.
In other words, a shortcut key (Mac OS X) to select opening, closing and all the markup in between.
With the html that you have:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>
Portfolio
<!-- TODO: Make this a dropdown menu. -->
<ul>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
</li>
</ul>
</nav>
In VS Code, if you select the <nav> in the first line and then do the keyboard shortcut:
Shift+Alt+→
It should highlight the whole code block for you.
You can also use the search feature, enabling RegEx search mode as described in this answer
Here is the search string you can use:
<nav>[\s\S]*<\/nav>
Explanation:
Search for the specific characters: <nav>
Followed by zero-or-more (*) white-space (\s) and/or NON-white-space (\S) characters (which includes newlines), and
Stopping when you reach </nav> (inclusive)
See this regex101 demo
The link for Drop down 1 and 2 does not want to work.
The page with this code is http://www.lansdownesdachurch.co.za/index.html
I have left the drop down menu visible while trying to sort out this problem.
<nav>
<ul class="nav">
<li><a class="current" href="index.html">Home</a></li>
<li>About Us
<ul>
<li>Drop down 1</li>
<li>Drop down 2</li>
</ul>
</li>
<li>Our Beliefs</li>
<li>Bible Study</li>
</ul>
</nav>
In your href of drop down, put the name of your html page instead of #
For example, if drop down 1 must redirect to books and drop down 2 to sea:
<li>Drop down 1</li>
<li>Drop down 2</li>
Your href attributes are empty, you need to point them to html file you want to open, I'd go with relative URL in your case to keep it simple. You can read more details on drop-down menus here.
this is my code:
<div id="templatemo_menu">
<ul>
<li>Home</li>
<li>Login</li>
<!--<li>Templates</li>-->
<li>About</li>
<li>Contact Us</li>
</ul>
<ul>
<li>Home</li>
<li>Profile</li>
<!--<li>Templates</li>-->
<li>Leave</li>
<li>Complaint</li>
<li>Resignation</li>
</ul>
</div>
</div>
now when employee visits my home page without login in to my site then i want to display this on my menu bar:
<ul>
<li>Home</li>
<li>Login</li>
<!--<li>Templates</li>-->
<li>About</li>
<li>Contact Us</li>
</ul>
and i want to hide this from my menu bar:
<ul>
<li>Home</li>
<li>Profile</li>
<!--<li>Templates</li>-->
<li>Leave</li>
<li>Complaint</li>
<li>Resignation</li>
</ul>
but when employee login in to my site then i want to display this on my menu bar on my button click event:
<ul>
<li>Home</li>
<li>Profile</li>
<!--<li>Templates</li>-->
<li>Leave</li>
<li>Complaint</li>
<li>Resignation</li>
</ul>
and i want to hide this from my menu bar on button click event:
Home
Login
Templates</a></li>-->
About
Contact Us
can any one suggest me how to do that???
if you prefer using JavaScript then solution is after click on login:
document.querySelector('#templatemo_menu ul:nth-child(1)').style.display='none';
document.querySelector('#templatemo_menu ul:nth-child(2)').style.display='block';
and if guest user without login go with
document.querySelector('#templatemo_menu ul:nth-child(2)').style.display='none';
document.querySelector('#templatemo_menu ul:nth-child(1)').style.display='block';
Note: But You might want to go for server side solution for checking session or cookie since JavaScript would not work, when user refreshes page.
A trivial solution would be to harness jQuery's $.click() method to detect when your relevant tag has been clicked, then apply a styling which displays your menu. Or better yet, use jQuery's $.toggle to hide and show the menu based on alternating click events, applying and removing the same styling.
If you could place your site into something like a JSFiddle, it would be much simpler for us to see exactly what your markup represents and how to help. Best of luck!
I have an HTML code like this:
<div class="menu">
<ul>
<li id="default">Home</li>
<li>Research</li>
<li>Publications</li>
<li>Resume</li>
<li>Blog</li>
</ul>
</div>
I'd like the link
<li>Blog</li>
to redirect to another external page. So I changed the code like this:
<li>Blog</li>
But the whole page messed up and got crazy on me. Is there a way I can make this work somehow?
Here is your answer. I was also getting this problem but then I researched and found that we have to use a protocol like https:// and http:// before we open an external link. you can see my research.
<li>v</li>
i have set working example i think in your html you forget to close any tag
<div class="menu">
<ul>
<li id="default">Home</li>
<li>Research</li>
<li>Publications</li>
<li>Resume</li>
<li>Blog</li>
</ul>
</div>
see here