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.
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 would like to add a menu or footer like in Wordpress or any other CMS.
That really dont work with PHP includes because if a website file is in subdirectory there is a problem with the path.
As you know a normal static menu looks like
<nav>
<ul>
<li>About</li>
</ul>
</nav>
but CMS menu looks like
<nav>
<ul>
<li>About</li>
</ul>
</nav>
And that on all pages so no problems with the path
if you try it with static/dynamic pages you have to add the path or the url and that looks really ugly or not
<?php
define('WEB_ROOT', '../'); // relative path to /
?>
...
<nav>
<ul>
<li>Solution</li>
or
<li>Solution</li>
or
<li>Solution</li>
</ul>
</nav>
I think thats a bad idea and really ugly.
so how to solve that kind of problem maybe with adding a web root in php like above but looks not really good so do you have any other ideas?
And that Solution should also work for CSS and JS not only for static contents, so all styles are same and menus looks just like the other pages even if it is in the subdirectories
Generally in Wordpress I use the site url to generate full urls:
site_url('/about');
As for JS/CSS files, it depends where you are putting them. If the files are located in a specific theme use:
get_template_directory();
you can use it...in "a" tag href="", use this:
echo home_url('index.php/about');
or remove the index.php, just about [the name of the page.]
Done.
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.
Currently for my projects I create the navigation for each page manually and it looks something similar to:
<nav>
<ul id="mainMenu"><!--Main Menu-->
<li><a class="active" href="index.php">Home</a></li>
<li>Contact</li>
</ul>
</nav>
This works fine, however for projects that has many many pages it is not a really good practice or even efficient to do it manually. So I was wondering if there is anyone who can direct me to the right path and advice me on how to make my navigation dynamic? I know about PHP include and the .inc files - they are good. BUT I want to add class .active to the <a> of the page that is currently open. How can I do that?
BTW: I don't know if this s the right place to post this sort of questions here, but the moderator told me to post it here.
Use include to add a central php file, that contains a function which can take the current page as a parameter:
nav.inc:
function renderNavigation($current_page) {
//render you navigation
}
main.php:
require_once("nav.inc");
renderNavigation("Subpage 1")