Creating a Static/Fixed Nav Bar with Only HTML - html

hope you're doing well.
My boss recently asked me to rebuild the nav bar on our site.
He wants to move away from our current method of just having the nav code on each and every web page - so we can make edits to the nav bar periodically that will be automatically implemented across the website.
He built our website back in the early days of web dev, and as such it is basically an HTML animal that really just gets the job done (and has for years) but is not responsive or pretty.
He's adamantly against using any sort of PHP or JS, since my initial thought was a JQuery script to grab a nav.html file on each page. Bummer!
That being said, does anyone know how I can essentially create the same results? Having a singular file or block of code that can be changed and then reflected on all pages across our site , using only HTML?
Thanks in advance everyone!
Here is the code we currently have copied to all of our pages, which was created long ago:
<div id="navbox">
<!----BEGIN NAV----->
<!-- #BeginLibraryItem "/library/mainsite_nav.lbi" -->
<link href="css_files/nav_control_main2.css" rel="stylesheet" type="text/css" />
<ul id="nav_horiz">
<li class="navbar"></li>
<li class="navbar">Products
<ul>
<li class="navdrop">Underwater Lasers
<ul class="flyout">
<li class="navdrop">Underwater Scanners</li>
<li class="navdrop">Subsea Scanners</li>
<li class="navdrop">Nuclear Underwater Scanner</li>
<li class="navdrop">Laser Scanner PanTilt Arm</li>
<li class="navdrop">Angle/Distance Scanner</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop">Nuclear Inspection
<ul class="flyout1">
<li class="navdrop">Core Verification System</li>
<li class="navdrop">Nuclear Underwater Scanner</li>
<li class="navdrop">Inspector In-Tank Robot</li>
<li class="navdrop">Upper RPV Measuring Robot</li>
<li class="navdrop">Restricted Area Access Control</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop">Robotics<a href="robot_inspector_land.html">
<ul class="flyout2">
<li class="navdrop">Inspector In-Tank Robot</li>
<li class="navdrop">Surveyor Inspection Robot</li>
<li class="navdrop">Press Die Vision System</li>
<li class="navdrop">Upper RPV Measuring Robot</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop">Machine Vision
<ul class="flyout3">
<li class="navdrop">Line & Area Scanning</li>
<li class="navdrop">Non-Contact Gauging</li>
<li class="navdrop">Surface Defects</li>
<li class="navdrop">Pattern Matching</li>
<li class="navdrop">Assembly Verification</li>
<li class="navdrop"></li>
<li class="navdrop">FME Console</li>
<li class="navdrop">QuadCam Zoned Surveillance</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navbar">Industries
<ul>
<li class="navdrop">Nuclear Power</li>
<li class="navdrop">Oil and Gas</li>
<li class="navdrop">Marine</li>
<li class="navdrop">Automotive</li>
<li class="navdrop">Bottling & Canning</li>
<li class="navdrop">Aerospace</li>
<li class="navdrop">Other Industries</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navbar3">Technologies
<ul>
<li class="navdrop">Underwater Laser Scanning</li>
<li class="navdrop">Nuclear Core Validation</li>
<li class="navdrop">Inspector In-Tank Robot</li>
<li class="navdrop">Line & Area Scanning</li>
<li class="navdrop">Non-Contact Gauging</li>
<li class="navdrop">Surface Defects</li>
<li class="navdrop">Pattern Matching</li>
<li class="navdrop">Assembly Verification</li>
<li class="navdrop">Robotics<a href="robot_inspector_land.html">
<li class="navdrop"> </li>
</ul>
</li>
<li class="navbar">Newsroom</li>
<li class="navbar">About Us
<ul>
<li class="navdrop">Core Competence</li>
<li class="navdrop">Company Background</li>
<li class="navdrop">Academic Website</li>
<li class="navdrop">Careers at Newton</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop">Contact Us</li>
</ul><!-- #EndLibraryItem -->
</div>

Related

What is correct way of closing list elements?

I tried to validate my code on W3 validator and its showing errors like - No li element in scope but a li end tag seen.
It's bootstrap dropdown menu, that i found on bootstrap examples.
Am i missing something about list elements?
<li class="menu-open">
Collections
<ul class="drop-menu dropdown-menu">
<li class="drop-menu dropdown-submenu">
2014
<ul class="drop-menu dropdown-menu">
<li class="dropdown-submenu">
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
</li>
</ul>
</li>
<li class="drop-menu dropdown-submenu">
2014
<ul class="drop-menu dropdown-menu">
<li class="drop-menu dropdown-submenu">
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
</li>
</ul>
</li>
<li class="drop-menu dropdown-submenu">
2014
<ul class="drop-menu dropdown-menu">
<li class="dropdown-submenu">
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
</li>
</ul>
</li>
</ul>
</li>
You are probably looking to have another ul inside your submenu items
<ul class="drop-menu dropdown-menu">
<li class="dropdown-submenu">
<ul>
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
</ul>
</li>
</ul>
In the following code:
<li class="drop-menu dropdown-submenu">
<li>2014</li>
<li>2013</li>
You definitely cannot have <li> as a direct descendant of itself. That's one major issue and apart from that, try having all the closing tags right. Bootstrap examples are validated perfectly.

4 Wide Columns in HTML/CSS

I apologize for the dumb question, but really don't want to send this to my devs. I am trying to add a fourth column to this area for another automotive brand. I tried duplicating one of the lists -- and it placed it on a separate line. Looking to go four wide.
Here is what is looks like live with three-wide.
<h2>Most popular selections:</h2>
<ul class="col-wrapper">
<li class="col-outer">
<ul class="col-inner-wrapper">
<li class="col-inner col-title"><h3>Volkswagen</h3></li>
<li class="col-inner">MK7 GTI 2.0T</li>
<li class="col-inner">MK7 Golf R 2.0T</li>
<li class="col-inner">MK6 GTI 2.0T</li>
<li class="col-inner">MK6 Golf R 2.0T</li>
<li class="col-inner">CC 2.0 TSI</li>
<li class="col-inner">MK5 R32 3.2L</li>
</ul>
</li>
<li class="col-outer">
<ul class="col-inner-wrapper">
<li class="col-inner col-title"><h3>Audi</h3></li>
<li class="col-inner">S3 2.0T</li>
<li class="col-inner">A4 2.0 FSI Quattro</li>
<li class="col-inner">S4 2.7T</li>
<li class="col-inner">A4 1.8T Quattro</li>
<li class="col-inner">A3 2.0T FSI</li>
<li class="col-inner">S5 4.2L</li>
</ul>
</li>
<li class="col-outer">
<ul class="col-inner-wrapper">
<li class="col-inner col-title"><h3>Porsche</h3></li>
<li class="col-inner">911 Turbo 997.2 3.8TT</li>
<li class="col-inner">911 Turbo 997.1 3.6TT</li>
<li class="col-inner">911 Turbo 996 3.6TT </li>
</ul>
</li>
</ul>
.col-outer { display:inline-block; vertical-align:top;}
<ul class="col-wrapper">
<li class="col-outer">
<ul class="col-inner-wrapper">
<li class="col-inner col-title"><h3>Volkswagen</h3></li>
<li class="col-inner">MK7 GTI 2.0T</li>
<li class="col-inner">MK7 Golf R 2.0T</li>
<li class="col-inner">MK6 GTI 2.0T</li>
<li class="col-inner">MK6 Golf R 2.0T</li>
<li class="col-inner">CC 2.0 TSI</li>
<li class="col-inner">MK5 R32 3.2L</li>
</ul>
</li>
<li class="col-outer">
<ul class="col-inner-wrapper">
<li class="col-inner col-title"><h3>Audi</h3></li>
<li class="col-inner">S3 2.0T</li>
<li class="col-inner">A4 2.0 FSI Quattro</li>
<li class="col-inner">S4 2.7T</li>
<li class="col-inner">A4 1.8T Quattro</li>
<li class="col-inner">A3 2.0T FSI</li>
<li class="col-inner">S5 4.2L</li>
</ul>
</li>
<li class="col-outer">
<ul class="col-inner-wrapper">
<li class="col-inner col-title"><h3>Porsche</h3></li>
<li class="col-inner">911 Turbo 997.2 3.8TT</li>
<li class="col-inner">911 Turbo 997.1 3.6TT</li>
<li class="col-inner">911 Turbo 996 3.6TT </li>
</ul>
</li>
</ul>

CSS3 accordion menu 3 levels

Is there a way to extend this designmodo example to allow for 3 levels of navigation?
I’d very much like to use this menu example, but I can’t figure out how to add a third level of functionality. Any help would be greatly appreciated!
Example:
http://designmodo.com/css3-accordion-menu/
Here is a fiddle that i'm working with: http://jsfiddle.net/johnstonian/r5rEZ/
Here is a sample menu i'm working with:
<ul class="accordion">
<li id="one" class="files">
My Files<span>495</span>
<ul class="sub-menu">
<li id="five">
<em>01</em>Dropbox<span>42</span>
<ul class="sub-menu">
<li><a><em>01</em>3rd Level<span>9</span></a></li>
<li><em>02</em>3rd Level<span>14</span></li>
<li><em>03</em>3rd Level<span>3</span></li>
</ul>
</li>
<li><em>02</em>Skydrive<span>87</span></li>
<li><em>03</em>FTP Server<span>366</span></li>
<li><em>01</em>Dropbox<span>42</span></li>
</ul>
</li>
<li id="two" class="mail">
Mail<span>26</span>
<ul class="sub-menu">
<li><em>01</em>Hotmail<span>9</span></li>
<li><em>02</em>Yahoo<span>14</span></li>
<li><em>03</em>Gmail<span>3</span></li>
</ul>
</li>
<li id="three" class="cloud">
Cloud<span>58</span>
<ul class="sub-menu">
<li><em>01</em>Connect<span>12</span></li>
<li><em>02</em>Profiles<span>19</span></li>
<li><em>03</em>Options<span>27</span></li>
</ul>
</li>
<li id="four" class="sign">
Sign Out
<ul class="sub-menu">
<li><em>01</em>Log Out</li>
<li><em>02</em>Delete Account</li>
<li><em>03</em>Freeze Account</li>
</ul>
</li>
</ul>
Use a menu designed for this, such as:
CSSPlay: Multi-Level Flyout Menu
CSSPlay: A cross-browser drop-down cascading validating menu
CSSPlay: The ULTIMATE CSS only drop-down menu

force link to go to top of page

i have a site with multiple pages inside a single index.html.
the menu elements call for these pages using a path "#!/..."
<nav class="menu">
<ul id="menu">
<li id="item1"><span></span><a "javascript:void(0)" href="#!/">home</a></li>
<li id="item2"><span></span>about us</li>
<li id="item3"><span></span>what we do</li>
<li id="item4"><span></span>our work</li>
<li id="item5"><span></span>links</li>
<li id="item6"><span></span><span></span>opportunity alert</li>
<li id="item7"><span></span>contact us</li>
</ul>
</nav>
This seems to work okay except when you scroll down the page, then click another link, then click the link to the previous page you scrolled down on. This returns you to where you were scrolled down previously. I need it to return you to the top of each page when you click on any page link.
Just take out the pound sign:
<nav class="menu">
<ul id="menu">
<li id="item1"><span></span><a "javascript:void(0)" href="/">home</a></li>
<li id="item2"><span></span>about us</li>
<li id="item3"><span></span>what we do</li>
<li id="item4"><span></span>our work</li>
<li id="item5"><span></span>links</li>
<li id="item6"><span></span><span></span>opportunity alert</li>
<li id="item7"><span></span>contact us</li>
</ul>
</nav>

Is there anything "wrong" with this markup?

Here is the markup I'm using:
<ul class="menu">
<li id="planning_menuItem" class="menuItem">Estate Planning</li>
<ul class="subMenu">
<li id="will_menuItem" class="subMenuItem">Last Will & Testament</li>
<li id="poa_menuItem" class="subMenuItem">Power Of Attorney</li>
<li id="livingWill_menuItem" class="subMenuItem">Living Will</li>
<li id="trusts_menuItem" class="subMenuItem">Trusts</li>
</ul>
<li id="probate_menuItem" class="menuItem">
Estate Probate Administration
</li>
<li id="realEstate_menuItem" class="menuItem">Real Estate</li>
<li id="medicaid_MenuItem" class="menuItem">Medicaid</li>
<li id="guardianships_menuItem" class="menuItem">Guardianships</li>
</ul>
Is there anything stylistically wrong about having that "ul" (class=subMenu) in the middle of a list without it having it's own li tag? This particular mark-up solves my problem, but I want at least be aware of whether I'm breaking some standard or convention.
The alternative is as follows, but it doesn't work for my particular task.
<ul class="menu">
<li id="planning_menuItem" class="menuItem">Estate Planning
<ul class="subMenu">
<li id="will_menuItem" class="subMenuItem">Last Will & Testament</li>
<li id="poa_menuItem" class="subMenuItem">Power Of Attorney</li>
<li id="livingWill_menuItem" class="subMenuItem">Living Will</li>
<li id="trusts_menuItem" class="subMenuItem">Trusts</li>
</ul>
</li>
<li id="probate_menuItem" class="menuItem">
Estate Probate Administration
</li>
<li id="realEstate_menuItem" class="menuItem">Real Estate</li>
<li id="medicaid_MenuItem" class="menuItem">Medicaid</li>
<li id="guardianships_menuItem" class="menuItem">Guardianships</li>
</ul>
Thanks!
Yes, there is something wrong, <ul>'s can be inside of <li>'s, but not other <ul>'s.
This is correct...
<ul>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
<li></li>
</ul>
According to the HTML DTD, you cannot have a <ul> directly under another <ul>. You should nest it inside a <li>.
If you're worried about the additional padding/margins, you can remove them with a rule that only applies to <ul> elements as direct children of <li> elements:
li > ul { margin: 0; padding: 0 }
(Or experiment with the best setting for your style)
BELOW is proper way
<ul class="menu">
<li id="planning_menuItem" class="menuItem">
Estate Planning
</li>
<li>
<ul class="subMenu">
<li id="will_menuItem" class="subMenuItem">
Last Will & Testament
</li>
<li id="poa_menuItem" class="subMenuItem">
Power Of Attorney
</li>
<li id="livingWill_menuItem" class="subMenuItem">
Living Will
</li>
<li id="trusts_menuItem" class="subMenuItem">
Trusts
</li>
</ul>
</li>
<li id="probate_menuItem" class="menuItem">
Estate Probate Administration
</li>
<li id="realEstate_menuItem" class="menuItem">
Real Estate
</li>
<li id="medicaid_MenuItem" class="menuItem">
Medicaid
</li>
<li id="guardianships_menuItem" class="menuItem">
Guardianships
</li>
</ul>
as others have said the second way is valid
here's a forked jsfiddle showing some new CSS which should help
summary is that you want to keep the ul's and their li's full width no side padding or margins, so reset all ul's; then make the a's display block so they fill their parent li's - then use text-indent to create the indented look of the li's
then however you choose to apply an "active or selected" class - apply it to the li OR a and any hover changes can be made too.