I'm having issues with the drop down menu I created and linking to specific pages.
The issue I have is I cannot follow links to different pages as it tries to direct the browser to a file within the directory that doesn't exist. For example. When I am on the homepage and I drop down the ABOUT menu and hit OUR TEAM, it will direct to the OUR TEAM page, but once I am on the OUR TEAM page and drop down the RESOURCES menu, it tries to take me to "about/resources/whateverpage.php" as opposed to "/resources/whateverpage.php"
How do I make it so it will actually direct the to /resources directory instead of remaining within the /about directory. I've tried using "../" before the links but you can guess where the problems would arise with that.
As well, because of the fact that I have the links pointed to about/ourteam.php (for example), when I am in the ABOUT menu/directory and I go to click another page within the ABOUT menu it tries to lead me to about/about/hours.php instead of about/hours.php
Thanks folks.
My code is as follows:
<div id="menu">
<ul><strong>
<li>HOME |</li>
<li>ABOUT |
<ul>
<li>Our Team</li>
<li>Referral Process </li>
<li>Financial Policy</li>
<li>Facility</li>
<li>Hours/Directions</li>
</ul>
</li>
<li>EMERGENCY SERVICE |
<ul>
<li>What We Do</li>
<li>How We Are Staffed</li>
<li>Emergency/Referral Procedure</li>
<li>Types of Emergencies</li>
<li>What to Expect On Arrival</li>
</ul>
</li>
<li>SPECIALTY SERVICE |
<ul>
<li>Critical Care</li>
<li>Internal Medicine</li>
<li>Surgery</li>
<li>Rehab<li>
</ul>
</li>
<li>RESOURCES |
<ul>
<li>Referral Forms</li>
<li>Brochure/Business Card Reorder</li>
<li>Emergency Topics</li>
<li>Critical Care Topics</li>
<li>Internal Medicine Topics</li>
<li>Surgery Topics</li>
<li>Rehab & Fitness Topics</li>
<li>Links</li>
<li>Directions/Map</li>
<li>Where to Stay</li>
<li>Newsletter</li>
</ul>
</li>
<li>COMMUNITY EVENTS |</li>
<li>CAREERS |
<ul>
<li>Surgery</li>
<li>Neurosurgery</li>
<li>Orthopaedic</li>
</ul>
</li>
<li>CONTACT</li>
</strong></ul>
You need to add a / to the front of your links. These are relative links.
Related
This is the block of code I am having trouble with on a website. From all the looking I have done the <li> and </li> should work just fine. However when I run it on the site it causes this list to be linked to the next list as if I never closed the list tag. If I remove everything and bring the </li> to right behind the </a> it works fine, but if say I put a space or press enter it acts as if the </li> does not exist.
<li>contact
<ul class = "contact">
<li>email</li>
<li>phone</li>
<li>skype</li>
<li>twitter</li>
<li>facebook</li>
</ul>
</li>
<li> home
</li>
even something as simple as this the </li> gets ignored.
I'm doing a lesson on Codecademy about nested lists in html.
My code is as follows:
<ul>
<li>Work? I am currently unemployed.
Here's a list of things that I have
done though:
<ol>
<li>Farm Hand</li>
<li>Excersize Rider</li>
<li>Curator's Assistant</li>
<li>Teaching Assistant</li>
<li>Telephone Operator</li>
</ol>
</li>
<li>Education? I have dropped out of the
following institutions:
<ol>
<li>
Highschool (I did complete all
courses and receive credit)
</li>
<li>
College (I withdrew for
medical reasons)
</li>
</ol>
</li>
<li>Interests? Here are a select few:
<ol>
<li>Running</li>
<li>Martial arts</li>
<li>Equestrian activities</li>
<li>Video games</li>
</ol>
</li>
<li>Favorite Quotes
<ol>
<li>"This was a triumph"</li>
<li>
"It's not safe to go alone,
here, take this!"
</li>
<li>
"Our princess is in
another castle!"
</li>
</ol>
</li>
</ul>
However, the lesson throws the following error when I try to submit this code:
Oops, try again. Make sure you have at least one unordered list inside your unordered list of profile sections!
What am I doing wrong?
According to the error,
Oops, try again. Make sure you have at least one unordered list inside your unordered list of profile sections!
you need one unordered list inside your unordered list of profile sections. Currently, all of your internal lists are ordered lists (<ol>). Try turning one of them into a <ul>.
For example, this should match your error desciption:
<ul>
<li>Work? I am currently unemployed.
Here's a list of things that I have
done though:
<ul> <!--(Unordered List!)-->
<li>Farm Hand</li>
<li>Excersize Rider</li>
<li>Curator's Assistant</li>
<li>Teaching Assistant</li>
<li>Telephone Operator</li>
</ul>
</li>
<li>Education? I have dropped out of the
following institutions:
<ol>
<li>
Highschool (I did complete all
courses and receive credit)
</li>
<li>
College (I withdrew for
medical reasons)
</li>
</ol>
</li>
<li>Interests? Here are a select few:
<ol>
<li>Running</li>
<li>Martial arts</li>
<li>Equestrian activities</li>
<li>Video games</li>
</ol>
</li>
<li>Favorite Quotes
<ol>
<li>"This was a triumph"</li>
<li>
"It's not safe to go alone,
here, take this!"
</li>
<li>
"Our princess is in
another castle!"
</li>
</ol>
</li>
</ul>
So, I have an ordered list that has an unordered list within it, like so:
<ol>
<li>Choose which type of game you want to play</li>
<li>Press the spacebar to start the game</li>
<li>
<ul>
<li>Controls for single player mode:</li>
<li>
<ul>
<li>W and S</li>
<li>↑ and ↓</li>
<li>A and Z</li>
<li>' (apostrophe) and / (forward slash)</li>
</ul>
</li>
<li>Controls for double player mode:</li>
<li>
<ul>
<li>The right player uses A and Z</li>
<li>The left player uses ' and /</li>
</ul>
</li>
</ul>
</li>
</ol>
Unfortunately, it outputs this:
I embedded the additional lis as otherwise it failed W3C validation. The Validator complained about sticking <ul> elements inside of <ol> elements otherwise.
How do I fix this so that the list symbols in front of the items will go away?
Just don't create a new li to embed your nested uls, but add them to the existing li. Like this:
<ol>
<li>Choose which type of game you want to play</li>
<li>Press the spacebar to start the game
<ul>
<li>Controls for single player mode:
<ul>
<li>W and S</li>
<li>↑ and ↓</li>
<li>A and Z</li>
<li>' (apostrophe) and / (forward slash)</li>
</ul>
</li>
<li>Controls for double player mode:
<ul>
<li>The right player uses A and Z</li>
<li>The left player uses ' and /</li>
</ul>
</li>
</ul>
</li>
</ol>
Since ordered and unordered lists are block-level elements in HTML, they will wrap to the next line by default, so there's even no need to create additional divs or insert line breaks.
Is this what you want? You put nested lists inside of the li:
<ol>
<li>Choose which type of game you want to play</li>
<li>Press the spacebar to start the game</li>
<li>Controls for single player mode:
<ul>
<li>W and S</li>
<li>↑ and ↓</li>
<li>A and Z</li>
<li>' (apostrophe) and / (forward slash)</li>
</ul>
</li>
<li>Controls for double player mode:
<ul>
<li>The right player uses A and Z</li>
<li>The left player uses ' and /</li>
</ul>
</li>
</ol>
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 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.