I have a navbar with sublists. I use this navbar for a CSS navbar at the top of my web page, with links for the main pages and drop-down lists for the pages in the sub-lists. I would like to use the same structure to create a navbar at the side of my page for sublists.
All of my HTML pages have the following line near the top of the <BODY> that creates the navbar:
<?php include('navbar.php'); ?>
CSS styling of this navbar is taken care of elsewhere.
Suppose my navbar.php file has the following:
<nav id="mainnavbar>
<ul id="index">
<li>Home</li>
<li>Personal
<ul id="personal">
<li>About Me</li>
<li>Contact Info</li>
</ul>
</li>
<li>Professional
<ul id="professional">
<li>Activities</li>
<li>Resume</li>
</ul>
</li>
</ul>
</nav>
The horizontal navbar at the top of my page would list "Home | Personal | Professional", and there would be dropdown menus on "Personal" and "Professional". This navbar is easily included on ALL pages for a uniform experience. Not too hard.
If a user actually navigates to one of the main (or "parent") pages (e.g. "Home", "Personal", or "Professional"), however, I want there to be a second, vertical navbar on the side of that page with links to that page's "children."
For example, if the user goes to the "Personal" page, there should be a side-navbar with links to "About Me" and "Contact Info". If instead the user navigates to "Professional", that sidebar should instead display links to "Activities" and "Resume". If the user decides to go back to the "Home" page, the sidebar should display "Personal" and "Professional". (Although it would be 100% fine if it also displayed "Home" -- perhaps it would be easier that way?)
While I could hard-code a new <nav> for each page, I already have a unordered list structure and would like to make use of it. Any ideas how this could be done, or if there's a better way to do it?
Perhaps I would want to dynamically generate (via the magic of PHP) a second instance of <nav> that is a sort of partial copy of <nav id="mainnavbar">, listed above, but including one of the nested unordered lists, rather than everything. Then I could position and stylize each navbar separately.
(Note that only the Home, Personal and Professional pages should have a sidebar navigation menu because only they have "child" pages. The "child" pages should not have a sub-menu. )
In essence, I should have the following:
For index.html, I should have the following dynamically generated based on navbar.php:
<nav id="subnavbar">
<ul id="index">
<li>Home</li>
<li>Personal </li
<li>Professional</li>
</ul>
</nav>
For personal.html, I should have the following dynamically generated based on navbar.php:
<nav id="subnavbar">
<ul id="professional">
<li>Activities</li>
<li>Resume</li>
</ul>
</nav>
For professional.html, I should have the following dynamically generated based on navbar.php:
<nav id="subnavbar">
<ul id="professional">
<li>Activities</li>
<li>Resume</li>
</ul>
</nav>
For all other pages, there should be no sidebar navigation. (Or perhaps I should have some default navbar as a placeholder??)
I'm not sure if having the same id for an unordered list in two different <nav> sections would be problematic, however.
Thanks again for your help!
You can use PHP to determine what page you are on, and print out different HTML for the different pages. I put together the simplest version of what you are asking for. Use the same principle to expand on this. You can use the $_SERVER superglobal to find out the current URL.
<?php
// See if current URL ends with "personal.html"
$personal = preg_match('/personal\.html$/',$_SERVER['REQUEST_URI']);
?>
<nav>
<ul>
<li>Home</li>
<li>Personal
<?php if (!$personal) print '<ul>'; ?>
<li>About Me</li>
<li>Contact Info</li>
<?php if (!$personal) print '</ul>'; ?>
</li>
<li>Professional
<ul>
<li>Activities</li>
<li>Resume</li>
</ul>
</li>
</ul>
</nav>
All I am doing here is removing the <ul> tags for the personal page, which will put the two nested <li> inline with the rest of the navbar elements. You need to expand on this to fit the design you need.
Related
I have written some code that will highlight a link in the header based on: class="active". The class is connected to some CSS code to style it.
I am currently adding the class="active" the specified link for each page. However, since I want to move my header into it's own file and include it on each page, I will lose the ability to set the class for each page. I could of course add a variable that will allow me to sort of do the same thing.
What I wish to know is if there is a better and secure way to automatically set the class="active" to the page that I am on. I have seen some posts that suggest using: ($_SERVER['PHP_SELF'] but I have read that it could cause some security issues.
Lastly the main problem that I have is that I need to set two links to
class="active" if I am viewing a page that is in the portfolio list item. For instance, if games.html is currently viewed, both the games and the portfolio page should have the code: class="active".
(All of my .html files are read as .php)
Here is the html code I have so far:
<ul>
<li>Home</li>
<li><a class="active" href="portfolio.html">Portfolio</a>
<ul>
<li><a class="active" href="games.html">Games</a></li>
<li>2D Art</li>
<li>3D Models</li>
<li>Particles</li>
<li>Shaders</li>
<li>Environments</li>
<li>Programming</li>
<li>Substance Designer</li>
<li>Music</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Store</li>
</ul>
Any help will be appreciated!
PHP_SELF is safe when you only use it to compare values and don't directly use it in your html:
The portfolio menu can be made active by nested all related pages in a folder called portfolio and checking if the path starts with that folder.
<?php
$currentPage = $_SERVER['PHP_SELF'];
$portfolioFolder = 'portfolio/';
$isPortfolioFolder = substr($currentPage, 0, strlen($portfolioFolder)) == $portfolioFolder);
?>
<ul>
<li>Home</li>
<li><a class="<?= $isPortfolioPage ? 'active' : '' ?>" href="portfolio.html">Portfolio</a>
<ul>
<li>Games</li>
<li>2D Art</li>
<li>3D Models</li>
<li>Particles</li>
<li>Shaders</li>
<li>Environments</li>
<li>Programming</li>
<li>Substance Designer</li>
<li>Music</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Store</li>
</ul>
I'm new to wordpress.
Is it possible to use original HTML for navigation menu and edit its titles and URLs in wordpress admin?
My navigation HTML looks like this.
<nav>
<ul id="menu">
<li><a>Menu1</a>
<div class="slideToggleThis">
<ul>
<li><a>Menu1-1</a>
<ul>
<li>Menu1-1-1</li>
<li>Menu1-1-2</li>
<li>Menu1-1-3</li>
</ul>
</li>
<li><a>Menu1-2</a>
<ul>
<li>Menu1-2-1</li>
<li>Menu1-2-2</li>
<li>Menu1-2-3</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
<ul id="hamburger">
<li><a id="hamburgerFont"></a>
<ul>
<li><a>MenuS</a>
<ul>
<li>MenuA</li>
<li>MenuB</li>
<li>MenuC</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
As you can see from this, my nav has div between ul and li. The div is necessary because the nav is arranged with Flexbox, thus slideToggle from JQuery doesn't work properly without it (slideToggle changes affected elements' display to block which is not good for display: flex;).
As long as I know, HTML code created by "?php wp_nav_menu(); ?" is simple combination of ul and li which is different from mine.
Are there any solution for me to edit my original HTML navigation menu in wordpress admin? or should I manually change the php files every time I change the contents in the menu?
Thank you for reading.
There is a way of changing the structure of the WordPress menu. I'm not that good in explaining the exact code but this url may help you:
https://github.com/roikles/Wordpress-Bem-Menu
He creates a new navigation setup, based on BEM method, to create a new structure.
By calling bem_menu( you can add the navigation (read docs for more info). Here you can adjust your settings.
I am using Foundation 6 (first time) and I have the following top horizontal menu. It works and has the foundation class styles. I have not added any personal styles to the menu class, but when I get to a small screen or narrow my browser to a smaller width, the menu items are not wrapping downward - or stacking. They disappear off the screen to the right, as though I were using a fixed width.
<div class="row">
<div class="medium-12 columns menu-centered">
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>Location</li>
<li>Customer Reviews</li>
<li>Contact Us</li>
</ul>
</div>
</div>
I've looked and many samples of code like this and am not sure what I am missing. Help? thanks.
Finally found it in the foundation.zurb site:
http://foundation.zurb.com/sites/docs/responsive-navigation.html
"Responsive Menu"
"The Menu has some responsive CSS classes built in, which allow you to re-orient a menu on different screen sizes."
<ul class="vertical medium-horizontal menu">
I am creating a HTML/PHP based Website. Now I would like to add a menu but that menu should have on all pages the same structure like on a CMSso I mean:
On a normal/static dynamic website with subdirectories you have following structure
<nav>
<ul>
<li>Solution</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
but if it a php file is on a subdirctoryas solution
<nav>
<ul>
<li>Solution</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
On a normal CMS you see on all page also on pages witch are in 'subdirectories'
<nav>
<ul>
<li>Solution</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
I think with you can easy manage and change that kind of menu and you donnt have to change a mistake on 50 pages:)
I think I could do it with PHP but dont have any idea.
Maybe with Base URL but the the url would look like
<li>Contact</li>
and thats not that what I mean and want to get.
Hope you could give me an advice how to realize that
It really depends on the CMS of your choice. For Wordpress for example to establish base reference you use something like Your Page. If you later decide that sample page need to be called page-new for example I would go with find and replace function of any good editor out there. It will take certainly time for 50 or more links but it will be significantly less.
My colleague and I are working on a WordPress-Plugin that generated posts using a custom post type. It all work's fine until You look at the posts. The generated pages look good and use the Themes single.php template. The only problem is, that the menu, that works on all other pages of the site is empty on the pages generated by the plugin.
By empty I mean that the structure including links is there, just the text inside the <a> tags.
The generated menu on a post generated by the plugin looks like this
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="nav-menu">
<ul>
<li class="page_item page-item-1763">
</li>
<li class="page_item page-item-1761">
</li>
[...]
</ul>
</div>
</nav>
For all other pages, the menu looks like this:
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="nav-menu">
<ul>
<li class="page_item page-item-1763">
About
</li>
<li class="page_item page-item-1761">
Galerie
</li>
[...]
</ul>
</div>
</nav>
As You can see, the only difference is that there is no text between the <a> and </a> tags, which makes the menu unusable.
We really have no idea of how the plugin / custom-post-type creates this issue, as we tried this with different themes, and they all behave the same - so it is not an issue with the theme.
Any comment or hint that points in the right direction is greatly appreciated.