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.
Related
I have 3 menus with subitems in my navbar, those subitems are linked to specific sections id of the main page as such:
<ul id="navbar">
<li id="idli1" class="listli">
navbar-Item1
</li>
<li id="idli2" class="listli">
navbar-Item2
<ul class="sublist">
<li id="idsubli1" class="sublistli">
sub-Item 1</li>
<li id="idsubli2" class="sublistli">
sub-Item 2</li>
<li id="idsubli3" class="sublistli">
sub-Item 3</li>
</ul>
</li>
<li id="idli3" class="listli">
navbar-Item3
</li>
</ul>
On desktop everything works fine.
On mobile the link seems to not be valid, the formula https://www.site.co/page/#id doesn't work.
Clicking on the submenu just close the submenu.
If i remove the section id from the link, the subitem works and goes to the page.
you can check the menu here
am i missing something about mobile and anchors?
i really don't understand what is the problem about those links.
on mobile your navbar collapse from what I have seen so maybe its being assigned an id that you have used in your menu already thus the link won't work - ids should be unique
I have a navigation menu and I want the dropdown links to be in two separate columns.
I've tried using the columns property of CSS and have played around with other recommendations I have found online.
The html:
<nav id="nav">
<ul>
<li>Home</li>
<li>
Services
<ul>
<li><img src="images/icon_service1.png" alt="Service1" />Service 1</li>
<li><img src="images/icon_service2.png" alt="Service2" />Service 2</li>
</ul>
</li>
<li>
About
<ul>
<li><img src="images/icon_about1.png" alt="About1" />About 1</li>
</ul>
</li>
</ul>
The CSS:
I tried to post the CSS but kept getting an error that it wasn't indented properly with 4 spaces...? I'll try to post it in the comments...
The JS:
Dropdowns.
$('#nav > ul').dropotron({
offsetY: -16,
mode: 'fade',
noOpenerFade: true,
hideDelay: 400
});
The menu is displaying as a single dropdown and I want to show it as two columns.
I would preferably like to have it show two columns if there are 8 or more items in the drop down preferably, but I could set the css separately if need be.
I have tried css Columns but nothing I've tried has worked.
I'm attaching the CSS as images because the editor won't seem to let me add CSS...
enter image description here
enter image description here
<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
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.
I need to have the same hover effect to be applied on the current state for the main menu item (sub items already have the current state)
<ul id="left-menu"><li><a href="#">
<h3>Improve Your Free Web Page <span style="float:right">▼</span></h3>
</a>
<ul>
<li class="current">Upload Your Picture(s)</li>
<li>Upload Your Video(s)</li>
<li>Upload Your Logo</li>
<li>Upload Your Logotype</li>
<li>Update Your Tagline</li>
<li>Describe Your Business</li>
<li>Add Offer(s)</li>
</ul>
Jsfiddle
Usually with submenu's people create a list in a list. If you add the "current" class to the outer list, you can style it with css properly.