Brain freeze here.
What I want to do is have the Suckerfish drop down menu link to be active on the current page in the drop down as well as the top item.
I.e. below, in the Articles menu item, I'd like to have the top item "Articles" active at the same time that either Categoryone or Categorytwo is active. (Archives is a single level menu item, included here just FYI.)
I have php set up to generate a body tag with the title of the page, so the body tag for the page Categoryone is <body id="Categoryone">
HTML:
<ul class="sf-menu">
<li id="Archives-menu" class="current">Archives</li>
<li id="Articles">Articles<ul>
<li id="Categoryone-menu" class="current">Categoryone</li>
<li id="Categorytwo-menu" class="current">Categorytwo</li></ul></li>
</ul>
CSS:
#Archives #Archives-menu a, #Categoryone-menu #Categoryone-menu a, #Categorytwo-menu #Categorytwo-menu a
{
color:#fff;
}
If I throw this in #Articles #Articles-menu a to try and make Articles active, then all the links in the drop down are active.
You have not given much info about that you are truing to do. But here is my guess: Your selector is off. Try this:
#Archives a , #Archives-menu a , .current
{
color:#fff;
}
Also remove the current class from those items and add it to the appropriate item dynamically when the user is on the right page. (Maybe Sukerfish does that for you?)
Related
I've made dropdown using angular-ui-bootstrap
public/partials/partial2.html
<ul ...
<li class="dropdown" dropdown>
<a href="admin/partial2" role="button" class="dropdown-toggle" dropdown-toggle> brand list </a>
<ul class="dropdown-menu" role="menu">
<li>.....
</ul>
obviously href="admin/partial2" route(by angular-route) to same partial page( so same entire page ) and do nothing
but I need hand emoticon when user put mouse-over the anchor
Can I have this effect without specifying "href" attribute?
Yes, use css for that, create a rule for your anchor class (dropdown-toggle) in this case as follows:
.dropdown-toggle:hover {
cursor: pointer;
}
you can use <a> without href, but it's just like a spam inside your script.
For example, you have a text inside the div or, say, span, as in:
<span>Sitemap</span>
or, you have <ul> <li> in your dropdown menu, then you can add NEW Selector in your stylesheet(or CSS).
for example:
.mymenu li {
cursor:pointer;
}
From the code, I can explain that, you just need cursor:pointer, to make it happen. that's all.
if you set the cursor inside li, all li's will have that pointer.
to make it specific, I mean, if you need the pointer for only one scope, say, menu or dropdown menu where li or ul is used, you can add new selector then.
I'm trying to theme my menu to alter the default UL classes. So far I'm working with the following function:
function theme_menu_tree($variables){
return '<ul class="my-class">' . $variables['tree'] . '</ul>';
}
This works great but I need to apply a different class to the UL inside a parent item. Right now I get
<ul class="my-class">
<li class="dropdown">Item
<ul class="my-class">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
</ul>
How can I target the second UL to give it a different class using the theme_menu_tree function?
Why do you need to override the menu class? Why not look at the CSS id or class of the body, section, or block that the menu is in and use that of where you are at and use that to override it?
For example, I'm using this to override the default appearance of a leaf menu item in a block:
#block-menu-menu-top-navigation ul li.leaf
{
list-style-type: none;
list-style-image: none;
}
In Drupal, there is no such thing as default UL classes. There are theme functions (recognizable by the function name starting with theme_) and templates (recognizable by the filename ending with .tpl.php). Neither makes any assumptions about what HTML elements are used to render the data. Especially, Drupal makes no assumptions about which classes should be applied to the elements that a template or theme function produces.
Maybe you are looking for the Menu attributes module. It lets you define CSS class and ID.
Here i made an example of my menu jsfiddle. So i have horizontal menu with drop down, but what i need is - on page load first li should be expanded(this is not hard) and when i hover on any other element it should display current expanded content(and if i mouseleave current element should be expanded).
This is the situation when i hover on Item2 and mouseleave Item2 it should stay like this:
Item1 Item2 Item3
|||||
subItem2.1 subItem2.2 subItem2.3
UPDATE:
i managed to do it, but with exception, here is the link on JSFiddle
Its works as i wanted, but when i click on a link Item1 , or Item2 , init() function is called, and Item1 , active again, i need somehow to set active link - clicked one,
for example if i clicked on a Item3 link it redirects me to Item3 page and this link is active in menu.
(all code on Jsfiddle)
If I understand your question correctly, the problem is that you need to call the init function to redraw all, but at the same time you set there item1 as current; and this is not ok if you have just pressed link2.
If think that your solution should be to almost remove all the init code. All this can be done in the css styles, simplifying a lot your code.
you set active to items. (You are already doing this in the anchors, do it in the li). Then, put all the appearance styles inn the css, and your script is reduced.
don't need to set active on subitems. you can set rules like li.active li; that is, the li that is descendant of the active li.
Once you do all this, you can avoid the init funcion altogether.
Added fiddle
I have changed that in the updated fiddle
I am marking the visible item menu 'current', I find 'active' confusing for a class name. It must be in the li and not in the, so that it can affect the second level lis
Now the script is just
$(document).ready(function() {
$("#menu_item ul.menu li.expanded").mouseover(function(){
var previous = $('.current');
previous.removeClass('current');
$(this).addClass('current');
});
});
I am just removing current from the previous current element, and adding it to the new one.
The initial selection is just in the markup
<div id="menu_item">
<ul class="menu">
<li class="expanded first current">
Item1
And the new css rules are:
#menu_item > ul.menu > li.current {
background-color: orange;
}
#menu_item ul.menu li ul {
display: none;
}
#menu_item ul.menu li.current ul {
display: block;
}
you should doing changes in your style than its can work properly.
ul.menu li.expanded ul {
position: relative;
display: block;
top: 20px;
background-color: orange;
}
I am thinking that maybe URL targeting active state might be something you would be interested in. You can get the current path with JavaScript using window.location.pathname. You can check with jQuery using something like:
$(".first a[href=" + window.location.pathname + "]").addClass('active');
This will add the active class to all anchors in .first that have the same href attribute as the current path. You may need to trim the leading slash.
Please check out this article on active states.
You may also be interested in jQuery UI tabs.
Here is another jQuery UI tabs in standard practice.
I want to make make menu such that when I click on menu item, active menu item text color should remain same as hovering effect... I used a:active but it works only till page/content gets opened... once page gets opened its effect is lost.. What should I do..??
Suppose I'm having 'black' color as default for menu item text color, its color changes to 'white' on hovering and again 'black' when content gets loaded.. It should remain 'white' until I click on another menu item i.e. 'active' menu item should persist its color.(this should be the case for all menu items). What will I have to do to achieve this effect?
I'm new to javascript and jquery....
If, when you click, the page re-loads, then you need to somehow, in your back-end code, add a classname (say "selected") to the selected element. Then apply the same CSS rules to that element as :hover.
Otherwise, if you're not refreshing the page, and relying on jQuery to maintain a 'selected' type of state, do something like this:
HTML:
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
jQuery:
$('#menu li').click(function(){
$('#menu li').removeClass('selected'); // remove selected from any other item first
(this).addClass('selected'); //add selected to the one just clicked.
});
CSS
#menu li{color:black;background:white;}
#menu li:hover, #menu li.selected{
color:white;background:black;
/* CSS properties here will be applied to both hovered */
/* and last-clicked item*/
}
you should use class sequence
1-a:link
2-a:visited
3-a:hover
4-a:active
Thanks for the help Faust, your solution really worked for me. One quick edit though, I think there needs to be a "$" symbol in front of the "(this)," or at least that's what worked for me. So:
$('#menu li').click(function(){
$('#menu li').removeClass('selected'); // remove selected from any other item first
$(this).addClass('selected'); //add selected to the one just clicked.
});
I got a problem like this (this is html/css menu):
Eshop | Another eshop | Another eshop
Client wants it work like this:
User comes to website, clicks on Eshop. Eshop changes to red color with red box outline. User decides to visit Another eshop, so Eshop will go back to normaln color without red box outline, and another eshop will do the red outline trick again..
I know there is A:visited but I don't want all visited menu links to be red with red box outline.
Thx for any help :)
The same that Joe Skora has written but more specific:
.red {
outline-color:red;
outline-width:10px;
}
Now you could use Javascript (in this example using jQuery) in the click-event-handler:
$('.red').removeClass('red'); // removes class red from all items with class red
$(this).addClass('red'); // adds class red to the clicked item
Another way of doing it is the use of the pseudo selector :target.
For informations about it: www.thinkvitamin.com
You can do this with plain CSS and HTML. A method we commonly use is to have a matching ID and class selector for each navigation item.
The benefit to this is that you don't have to modify your menu code per page, you modify the page itself, which you'll already be doing unless everything is fully dynamic.
It works like this:
<!-- ... head, etc ... -->
<body>
<ul class="nav">
<li>Home</li>
<li>Art</li>
<li>Contact</li>
</ul>
<!-- ... more page ... -->
</body>
Then you set up some CSS like this:
#NAV-HOME .nav-home,
#NAV-ART .nav-art,
#NAV-CONTACT .nav-contact { color:red; }
To change the "current" menu item, you can just assign the corresponding ID to an element higher in the document's structure. Typically I add it to the <body> tag.
To highlight the "Art" page, all you have to do is this:
<!-- The "Art" item will stand out. -->
<body id="NAV-ART">
<ul class="nav">
<li>Home</li>
<li>Art</li>
<li>Contact</li>
</ul>
<!-- ... more page ... -->
</body>
You can do this with CSS classes. For example, a selected class could identify the current shop, changing the color and outline. Then you can change the selection by adding/removing the class from the menu item.
Take a look here, it walks through a tutorial on building CSS menus.
Basically, it can't be done with CSS alone, some scripting would have to take place (server or client side, preferably server). As the others have suggested, add a 'selected' class (or something similar) to the active link, and define the styles for it in CSS.
For example, the links:
Eshop | Another eshop | Another eshop
The styles:
.selected {
font-weight:bold;
color:#efefef;
}
The links would be generated dynamically, using PHP for example:
<?php
foreach(array('eshop' => '#','another eshop' => '#','yet another eshop' => '#') as $title => $url) {
echo '<a href="' . $url . '"'
. ($url == $_SERVER['REQUEST_URI'] ? ' class="selected"' : null)
. '>' . $title . '</a>';
}
If you are moving to a new page in the same browser window, Zack Mulgrew and Bobby Jack both have excellent answers.
If you are opening the eshop link in a new window, there is not much you can do with css alone, and gs has a reasonable answer except for the choice of class name of (red).
Which is it?
As far as I know you can do this only by generating different code for every page (setting a different class for the current page) or by using JavaScript to change the menu after the page is loaded.
you could use and attribute selector like this...
a[href^="http:\\www.EShop"]:visted { color: red; }
By doing that you are saying any link that has a href that starts with http:\Eshop.com and has been visted apply this style.
It depends on how your pages are constructed, but the classic CSS was of doing this is with an id on the body, as well as each navigational link, so you might have something like:
eshop.html
<body id="eshop">
<ul>
<li>Eshop</li>
<li>Another eshop</li>
<li>Another eshop</li>
</ul>
</body>
and corresponding CSS:
#eshop #link-eshop, #aeshop, #link-aeshop, #eshop-three #link-eshop-three
{
color: red;
outline: 1px solid red;
}
the navigation is consistent; only the id on the body changes from page to page.