I'm creating an custom template for wordpress, and I got problem with menu. I want to create menu in the sidebar.
I got static menu like this:
<ul class="purp_bullet">
<li><a href="#sub-1">A/a>
<ul id="sub-1">
<li>B</li>
<li>B</li>
<li>B</li>
<li>B</li>
<li>B</li>
</ul>
</li>
<li><a href="#sub-2">C/a>
<ul id="sub-2>
<li>D</li>
<li>D</li>
<li>D</li>
<li>D</li>
<li>D</li>
</ul></li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
With CSS like this:
ul.purp_bullet {
list-style-image: url('img/list_bullet.png');
padding-left: 17px;
text-decoration: none;
}
ul.purp_bullet li a {
color: #003366;
text-decoration: none;
}
ul.purp_bullet li a:hover {
color: red;
text-decoration: none;
}
ul.purp_bullet li a:active {
color: red;
text-decoration: bold;
}
I want it to be fully dynamic, just like wordpress menus, when I go into menu section in admin panel and create my own menu from pages that i created, then drag "my custom menu" onto widgets panel (sidebar) so it shows up. Note that this isn't my main menu (I already got the menu in header).
Also there is one more thing I need to do.
I got pages like employers and when I'm on some employer page the menu must be expanded( or rolled down, sorry for my bad english :x), but when i'm on other page it must be rolled up.
Screens:
When I'm on some employer page
When I'm on other pages like contact etc
Do i need create new menu in functions and then hook it like my main menu?
Can anyone help me how to do it?
Related
I want to put my menu in a separate PHP file so when I need to edit it, I only have to edit it once. The problem starts when I want to highlight the active page. Can someone help me to fix it?
<?php $currentPage = basename($_SERVER['SCRIPT_FILENAME']); ?>
Toggle navigation
<li></span> Home</li>
<li></span> About us</li>
<li class="dropdown">
<span class="glyphicon glyphicon-calendar"></span> Services <span class="caret"></span>
<ul class="dropdown-menu">
<li></span> Drivers services</li>
<li></span> Shop services</li>
</ul>
</li>
<li></span> On-line Application</li>
<li></span> Contact us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="clearfix"> </div>
</div><!-- navbar -->
I find the solution to my question adding this css in styles file:
/* The here ID identifies the current page and applies a white color to the text and a black background as a visual indicator. */
a#here {
background-color: #000 !important;
color: #fff !important;
}
Plus call the menu in each page with following code:
<div> <?php
$file ='includes/menu.php';
if (file_exists($file) && is_readable($file)) {
include($file);
} else {
throw new Exception("$file can't be found");
}
include('includes/menu.php');?>
</div>
A quick and dirty method to achieving this is in each file put the following:
<?php
include("header.php"); // Insert location of header file here
?>
and in your header.php file after creating your head block insert this
<?php $active= substr(basename($_SERVER['SCRIPT_FILENAME']),0, -4); ?> // Page Name
<body <?php echo "class='$active'";?>> // This sets the bodies class to be the page name.
finally in style.css use the following code to set the highlighted feature
// This is an example for my CSS. Insert your own css selector
// In my css i have this which adds a small orange bar to the bottom of the navigation option. I set the opacity to 0 to not display it.
.header nav ul li a:before
{
height: 5px;
background: #ea5c18;
opacity: 0;
}
// Then i set .PageName (the bodies class name) and set that specific nav element to have an opacity of 1.
.PageName .header nav ul li:first-child a:before
{
opacity:1;
}
so I have been having an issue with some PHP strings that I can't seem to figure out. The goal is to have the "parent" link remain as an active state whilst allowing the dropdown function to contine.
<li class="<?php echo($activePage == "releases" ? "active" : "")?>" class="dropdown">
Press <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="<?php echo($activePage == "releases" ? "active" : "") ?>">Releases</li>
<li class="<?php echo($activePage == "clips" ? "active" : "") ?>">Press Clips</li>
<li class="<?php echo($activePage == "assets" ? "active" : "") ?>">Press Assets</li>
</ul>
</li>
So the goal here is to get the PRESS link to show an active state when either of the three releases, clips or assets
You'll notice in the first list I have two classes at the moment. The PHP echo class when infront does display the PRESS link its active state however doesn't allow for any drop down, thus rendering the other three links invisible, when I place the other class in the front, the drop down works but then the PRESS link doesn't show an active state.
Can anyone solve this issue for me? Thanks a lot!
This is the setup I used for a site to make the active parent element stay highlighted, as I walked down the tree:
#navigation ul.nav > li:hover ul a:hover,
#navigation ul.nav > li:hover, #navigation ul.nav > li:hover ul li:hover {
background: #3e4b51 none repeat scroll 0 0 !important;
text-decoration: none;
}
The menu setup is this:
<nav id="navigation" class="col-full" role="navigation">
<ul class="nav">
<li>
HOME
</li>
<li>
Level 1
<ul class="sub-menu">
<li>
Level 2
<ul>
<li>
Level 3
<ul>
<li>
Level 4 Item 1
</li>
<li>
Level 4 Item 2
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
I have menu as follows
<ul>
<li>Home</li>
</ul>
how to make it Active when I visit that Page. I tried as follows but no luck
#navigation a:active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
I'm new webie thanks for any suggestions
Add id to your code as below
Update
<div id="menu">
<ul>
<li id="myHome">Home</li>
</ul>
</div>
Write Script as Below
<script>
window.onload = menuSelect('myHome');
</script>
Each page has a class on the body tag that identifies it:
BODY OF HOME PAGE:
<body class="home">
<ul>
<li>Home</li> //Each navigation item also includes a class identifying that particular link.
<li>About Us</li>
</ul>
</body>
BODY OF ABOUT US PAGE:
<body class="aboutUs">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</body>
Then you target those classes in your CSS, defining a different state for the current page:
CSS STYLE:
body.home a.home, body.aboutUs a.aboutUs{
//HERE GOES YOUR CSS
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
In your index.php page, you need to edit the HTML this way:
<ul>
<li>Home</li>
</ul>
In other pages, say about.php, you might have something like this:
<ul>
<li>Home</li>
<li>About</li>
</ul>
And change the CSS to .active and not :active, as the second one is a state of element:
#navigation a.active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
The :active pseudo-selector is for when an element is well, active, for example while a link is being clicked.
What you will need to do is give your <a> element a class attribute and style it accordingly.
I've never used the php include function but I recently read some good articles which encourage ti.
I'm going to use it mainly for menus and footers, but here's my question:
How can I attach a HTML class to a menu element.
e.g.
menu.php
<nav>
<ul>
<li>home</li>
<li>blog</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
index.html
<?php include 'menu.php'; ?>
In this case how do I set a class to any of these menu elemnts without using different menu.php files?
Long story short I need it so I can apply certain styles to a single element in the list, and each html file will match the specific menu voice
E. G. index.html will have the "home" anchor styled differently than other three elements.
Thanks in advance.
As per these examples
You can make use of option #2
CSS
#nav {
width:150px;
list-style:none;
}
#nav a {
color:black;
text-decoration:none;
}
#nav a:active, #nav a:focus, #nav a:hover {
color:red;
}
#home #homenav, #about #aboutnav, #contact #contactnav {
color:red;
}
#home #homenav:hover, #about #aboutnav:hover, #contact #contactnav:hover {
color:blue; /* add :active and :focus styles here also */
}
HTML
<body id="home"> <!-- the body needs a unique id -->
<ul id="nav"> <!-- each anchor needs a unique id -->
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</body>
Give your elements ids and set the class in the including file.
I have this menu structure:
(the inner <ul> tag can be surrounded by a custom <div>, every other structural change is a lot more difficult because the code is generated from a dynamic module system, written in PHP)
<div id="menu">
<div class="body-menu">
<ul>
<li class="current"><div class="body-menu">
Item1
<ul>
<li class="current"><div class="body-menu">
Sub-Item 1
</div></li>
<li class=""><div class="body-menu">
Sub-Item 2
</div></li>
</ul>
</div></li>
<li class=""><div class="body-menu">
Item 2
</div></li>
</ul>
</div>
<div class="menu-background"></div>
</div>
The goal is to display the inner <ul> after Item 1 on the left side as a sub menu instead of at the top with the other toplevel items..
Is there a way to do that without modifying the structure? Just with CSS or so?
UPDATE:
thanks for all the answers!
especially to besluitloos and Caelea, that's exactly what I'm looking for.
The parent <li> containing the second <ul> should be positioned relative and the contained <ul> should be positioned absolute.
Sometihing like:
ul li { position: relative ;}
ul li ul {position: absolute; top: 0; left: 145px;}
I wrote left: 145px but you can give any value you want to that, depending on how big you want your menu to be.
PS: Tip: don't use the same "body-menu" class on those divs it should be different for the big container, and not only. And I don't really think it's necessary to have that div inside those < li >.
Probably you want to do something like hiding the sub-menu and make it pop up or show up when the mouse is hovering. Take a look at http://cssmenumaker.com/builder/42231 for an example.
.body-menu > ul > li {
position:relative;
float:left;
padding-bottom: 1em;
}
.body-menu ul ul {
position:absolute;
left:0;
top:1.3em;
display:none;
}
.body-menu > ul > li:hover > ul {
display:block;
}
Is that what you're looking for?
EDIT: I'm sorry, IE doesn't play nice with inline-block. So you'll have to change that to 'inline'. Then you can leave out the bottom padding because that doesn't work on an inline element. Except if you float the element. edited the code above to work with float.
edit 2: typo.