keeping css drop down menu item highlighted with php - php

My Website
On the link above you can see that I have a CSS drop down menu in my site. It works fine, however, I want the top level items to stay highlighted when I'm on the page they represent.
I have this so far but it won't work (I'm only showing one menu item which doesn't have any sub menus as it saves space)
Here's the HTML:
<ul>
<li><h2><a name="donate" id="donate" href="index2.php?op=Donate">Donate</a></h2></li>
</ul>
Here's the CSS that colours the background:
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
The content of each page is determined by the value of $head: $head = $_GET['op'];
I tried to implement the change by placing this straight after the menu:
if($head == "Donate") {
echo '<style>
#menu a donate {
color: #000;
background: #fff;
text-decoration: none;
</style>';
}
When I leave 'donate' out of the above code: '#menu a {' the background color of all the menu items changes to white, but I need to change the 'donate' button specifically. I tried doing this by adding id="donate" / name="donate" to the menu item (as seen above), and then calling it in css with '#menu a donate {'. but that is obviously wrong as it doesn't work! What should I do?

I think you need to use
if($head == "Donate") {
echo '<style>
#menu a#donate {
color: #000;
background: #fff;
text-decoration: none;
}
</style>';
}
as a selector instead, because donate is an id for the a tag, therefore it comes immediately after the a tag (no spaces) with a "#" in front.
You were also missing a "}" closing bracket for the css declaration.

OK, quick and dirty answer : your CSS selector wont work, because right now it search for a tag "donate" inside a "a" tag inside a tag with the id "menu". I assume all your link have a specific Id, so the easy way to do it is to use this selector
#donate
{
color: #000;
background: #fff;
text-decoration: none;
}
As an added bonus, this selector will be faster to parse by the browser.
By the way, you seem not to close the style tag. Is that an error?
Now, for a longer answer, it is not exactly the best way to do it. I suggest you create a CSS class with a name like "currentpage" and to use it like this in your menu
<li><h2><a <?php if($head == "Donate") echo 'class="currentpage"'; ?> id="donate" href="index2.php?op=Donate">Donate</a></h2></li>
That way you can keep your style in the stylesheet where it will be easier to maintain. Now of course, if all your menu tags are handcoded, you may find it pretty tedious to add the condition in everytag. If it's indeed the case, I suggest you create your menu using a loop.
By the way, you should remove the name attribute in the a tag, its a deprecated feature. id does the job just fine.

In this kind of situations, you will generally use a CSS class for the currently highlighted item :
<a href="..." class="highlight" ...>Current item </a>
<a href="..." ...>not current item</a>
This way, you won't change the id nor name nor anything else -- but just :
When an item is highlighted, add the css class
And when an item is un-highlighted, remove the css class.
That class can be added from Javascript, if necessary -- but it can also be generated from PHP, using something like this :
<a href="..." <?php if ($current=='item1') {echo 'class="highlight"';} ?> ...>Current item </a>
<a href="..." <?php if ($current=='item2') {echo 'class="highlight"';} ?>...>not current item</a>

usgin css you can try like this:
#menu a:active {
color: #000;
background: red:
text-decoration: none;
}
using jquery this can be done as following:
First create a css like below:
.active {
color: #000;
background: red:
text-decoration: none;
}
then write jquery code:
$('#menu a').click(function(){
$('#menu ul li h2').find('a.active').removeClass('active');
$(this).addClass('active');
});

You should set a class for the current page item using php, and use css to set rules for that class.

Related

How can I target this HTML code individually in CSS?

I have two sets of text that need to be inline with each other but at the moment one is placed higher than the other. The two sets of text share the same CSS code so when I edit it, both are affected. However, I would like to target only one of the text; Is there a way of doing this?
Here is the HTML and CSS:
<div id="mi-slider" class="mi-slider">
<?
$result = $mysqli->query("SELECT * FROM stock");
while($obj = $result->fetch_object())
{
if($obj->id&1)
echo "<ul>";
?>
<li class="<?=$obj->orientation=='landscape'?'landscape':'portrait'?>" id="list">
<img src="./img/<?=$obj->description=='unframed'?$obj->poster_no:$obj->poster_no.'_frame'?>.jpg" alt="">
<h4><?= $obj->description=="unframed"?"Unframed Poster - 750mm x 500mm":"Framed Poster - 790mm x 540mm"?><br />£<?=$obj->price?> each</h4>
</li>
The CSS code:
.mi-slider ul li h4 {
display: inline-block;
font-family: HelveticaNeueRegular;
font-weight: 100;
font-size: 12px;
color: #a34235;
padding: 0 0 0;
text-align: left;
margin-top: 20px;
margin-left: 10px;
float: left;
}
you can use unique ID for each special element, then specify your CSS via '#' selector.
if the special CSS need to be applied to the first element,
consider using the ':first-child' selector. its cleaner.
but, if you want to target the second element (or later) consider that the 'nth-child' selector is not suported in older browser (like IE8)
If you want to target the second list items H4, you can use the nth-child selector, as below:
.mi-slider ul li:nth-child(2) h4
{ your css }
Use this:
li:first-child h4
{
your custum css
}
With this, the CSS rules only apply to the h4 tag of first li instead of all li.

How do I write a CSS for mouse hover [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to use CSS hover inside html-tag?
<body>
<div id="he">
<div id="header">
<div class="headertabs">
<ul class="nav">
<li class="divide"> </li>
<li class="tab">OVERVIEW1</li>
<li class="divide"> </li>
<li class="tab">OVERVIEW2</li>
</body>
How do I write a css when I move the mouse (hover) on the overview1 and overview2 tabs it has to change its text color to green.
Simnply use the :hover pseudo selector:
li.tab a:hover
{
color: green
}
http://jsfiddle.net/Kyle_/duj2d/
I snagged a bit of CSS from a file I have open that should explain it quite well:
This is my normal CSS for an anchor:
a
{
color: #006699;
text-decoration: underline;
}
This is the bit that changes the color when it is hovered over.
a:hover
{
text-decoration: none;
}
I'd put the hover on the <a> instead for better IE support, I'd also change the colour for focus so it changes for keyboard only users when tabbing through links, so:
.tab a:hover, .tab a:focus {
color: green
}
Another way
li a:hover{
color:green;
}​
little shorter:
.tab a:hover{color:green}

message popup on mouse hover

I am developing a website in wordpress.There is a menubar at the header.Now what i want is ,when i hover the mouse over the menu item i should get a message popup .
in above case it should be "services at Umang" when mouse is placed over services menu item.
the following is the css code for mouse hover
#access li a:hover
{
text-decoration:underline;
}
Any one has idea regarding this?
Use the title-attribute
Hover!
Or google for "jquery tooltip"
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
try this
<element onmouseover="alert('text')">qwe</element>
or
<element onmouseover="this.innerHTML='someText'"></element>
Use the title HTML attribute. It would cause a popup to occur after hovering after a certain short amount of time.
It's also native and semantic.
Live Example
You can do it with some div which has position: absolute and then make sth like:
CSS
#access li a:hover #someAbsolutePositioningDiv
{
display: block;
position: absolute;
top: some value;
left: some value;
}
#someAbsolutePositioningDiv
{
display: none;
}
HTML
<ul id="access">
<li>
Text
<div id="someAbsolutePositioningDiv">Some other text</div>
</li>
</ul>
Set the li to position:relative, inside of it place another element (the popup-message) and give it position:absolute and display:none, and position it with left, top etc (like: left:10px;top:-50px;) to the position you want. Then set it to display at hover:
li:hover .popup-message {display:block;}

Remove horizontal spacing when using position:relative in navigation bar

I'm trying to create a php navigation bar. I've come up with a nice looking scheme using the following code:
css:
a.navbar:link { color:#AAAAFF; text-shadow:none;
padding: 5px 12px; white-space:nowrap; font-size:15px;}
a.navbar:visited { color:#AAAAFF; text-shadow: #4444FF 0.0px 0.0px 2px}
a.navbar:hover { color:#CCCCCC; background:#444488; }
a.navbar:active { color:grey; }
a.navbar {padding:none; font-size:15px;}
span.leftbraces { font-size:25pt; padding: 0px 0px;
position:relative; right:-9px; bottom:-3.75px;}
span.rightbraces { font-size:25pt; padding: 0px 0px;
position:relative; left:-9px; bottom:-3.75px;}
php:
<?php
echo "<center>";
$links = array('Home'=>'index.htm', 'Site Map'=>'sitemap.htm');
$leftbrace = "<span class=leftbraces>[</span>";
$rightbrace = "<span class=rightbraces>]</span>";
foreach ($links as $key => $value) {
echo "$leftbrace<a class=navbar href=\"$value\">$key</a>$rightbrace";
}
echo "</center>";
?>
and html:
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<?php include 'navbar.test.php';?>
</html>
How can I eliminate the space between the braces without giving up the nice tightly-fitting background padding? The <table> tag I've included is not necessary, it was just my latest attempt to get this to work.
[ Home ] I want to get rid of this space [ Site Map ]
but I want to keep the tight fit of the highlighting
Here is a better way of doing it:
The list of links in your navigation is just that— a list. Instead of using a table, use ul, or unordered list. In my example, I also used the nav element, which is HTML5. You could easily replace it with a div.
<ul>
<li>Home</li>
<li>Site Map</li>
</ul>
Notice, I did not include the brackets in the markup. This is on purpose. Those brackets do not add to the content or meaning of the site, and should be in the domain of CSS.
This is easily done with pseudo elements:
nav a:before {content:'['; display:inline;}
nav a:after {content:']'; display:inline;}
You will lose some support with older versions of IE, but everyone, including IE users—and especially those using screen readers or with other accessibility issues—will benefit from the removal of superfluous spans. It will also degrade gracefully.
Here is a demo.
You could wrap [ Home ] and [ Site Map ] in a span. Set the margin of this wrapper to -8px.
http://jsfiddle.net/wkS6H/
Side note: Since you are displaying static content echo is inefficient. It causes the server to reproduce the same output every page request.
Remove the padding on the "navbar" element and the negative bounds on the braces. Like so: http://jsfiddle.net/kDq29/1/.
Also note the errors in your HTML markup.
EDIT: I forgot to save my changes from chrome. Updated now.
The '] Space [' was caused by left, right, bottom property of braces.
span.leftbraces { font-size:25pt; padding: 0px 0px;
position:relative; right:-9px; bottom:-3.75px;}
span.rightbraces { font-size:25pt; padding: 0px 0px;
position:relative; left:-9px; bottom:-3.75px;}
Remove the position properties and align the text by its only property.
- visit : http://jsfiddle.net/fPty7/1

styling links using CSS

.hi guys, i have a little problem on styling my menu bar. i have the following code:
#can_header {
width:1024px;
height:140px;
background-color:#8D96A8;
}
#can_header ul{
list-style-type:none;
margin: 0;
padding: 110px 0 0 550px;
font-family: adolph;
text-transform: uppercase;
font-size: 1em;
}
#can_header li{
display:inline-block;
line-height: 15px;
border-right: 2px solid #CCC;
}
#can_header li#item-104{
border-right: none;
}
#can_header ul a:visited{
color:#CCC;
text-decoration:none;
margin-right:15px;
margin-left:15px;
}
#can_header ul a:link{
color:#CCC;
text-decoration:none;
margin-right:15px;
margin-left:15px;
}
#can_header ul a:hover{
color:#EB1886;
}
#can_header ul a:active{
color:#FFFFFF;
}
what i want to do is that when i click one of the links on my ul the color of the selected link will permanently change while on the page of the link. with my present code the color of the link only changes while on-click.. but when the page changes the color will be back to normal. TIA! More Power!
.By the way I'm using Joomla, i'm just editing the CSS of the template that i made.
I'm afraid what you want to do isn't possible with CSS only. What you can do is create a css class that indicate that an item in your menu is selected and assign that class to your li element either using javascript or server side when you render the template
You can't do that with CSS alone, you need to add some class to the selected link (ie class="selected") using Javascript or PHP.
Then you can add a style rule for links with class .selected.
Their right you can't do that with CSS alone. You can use :active and change the text-color, or whatever, while it is being clicked down (aka onmousedown) but you can't have it change like blue + click = red.
JQuery should be able to help you with this though.
This will be handled by the menu module you are using to display the menu. Most modules have the option to turn on active highlighting which basically does what everyone is talking about, adds a CSS class to the active menu item. Chances are all you need to do is turn on the active highlighting on and add the appropriate CSS.
Also, I noticed you are turning off a right border in one of the menu items by using the itemID. You would be better off using the :lastchild psuedo selector in case you ever change the order of your menu items or remove the one you have chosen to be last.
Instead of #can_header li#item-104 use #can_header li:last-child
You should add css class programmatically to child object based on requested page.
An Example with php:
function GetFileName()
{
$currentFile = basename($_SERVER["PHP_SELF"]);
$parts = Explode('.', $currentFile);
return $parts[0];
}
$basename = GetFileName();
<li>
<a href="index.php" <?php if($basename =="index") echo "class='current'"; ?>>Home</a>
</li>
<li>
<a href="about.php" <?php if($basename =="about") echo "class='current'"; ?>>About</a>
</li>

Categories