I'm trying to make some nav menu items non-clickable if they have sub categories. I figured out how to do it for parent items but I'm have trouble with child items -making them non-clickable if they branch to lesser categories.
`enter code here`#nav-wrap .wsite-nav-0 a, .wsite-nav-1 a {pointer-events: none;};
Is sounds like what you are looking for is a parent selector, such a selector does not currently exist.
Some options:
Set a class for those you dont want to be clickable. Simple and to the point.
Use the href attibute as part of the selector, and set href="#".
Instructors [Other stuff here]
/*CSS*/
#navigaion a[href="#"] {pointer-events: none;}
Finally re-think. I always try to have a page for everything in my menus. Have a general instructors page with a paragraph or two about the group, then links to the indidvidual instructots.
Related
My website is https://thunderandmiles.com, would somebody be able to help? I've got the Site Nav ID as "Site-Navigation" and the menu button id as "btn-toggle".
The menu button is a class not an id so you'd want .btn-toggle for a css selector.
That'll select all elements with that class though. Suggest you add id="btnToggle" or the whatever id you like to select that specific element.
Your nav element has the id of site-navigation so use a css selector of #site-navigation to select it.
Info on case sensitivity here: Are class names in CSS selectors case sensitive?
How can I style my sub menu items? I have a custom made template, one module and one main menu, the sub menu items are all set as a child of the main menu.
My problem is that I don't know what to refer to when styling them. I could style all "nav-child unstyled small" or make classes using the li class number, i.e. ".item-134"
(I got these tags from the source code displayed by my browser).
Neither of these seem to be nice solution, is there any nicer way to do this?
David Fritsch is correct by using the menu-id classes to help select. Another alternative if you're worried about changing ID numbers is to use CSS3 nth-child selectors. You'll end up with something like:
.nav > li:nth-child(3) .nav-child {}
This will select the 3rd top-level item and then the child-items beneath it, and it's ID-free.
Is there a simple way to create a customer menu in WordPress that does not output a list? Basically I want a menu with pipes between the links. Every solution I've found says to style them with a right border or background image, but I'm not crazy about this solution and what if I wanted something like a "/" or "ยป" between each link? I think live type would look better too. I already know I can remove the container div and ul tags using "items_wrap" and "container". Any ideas on how to ditch the li's too and add separators? A filter or hook?
I'm looking to do this with WordPress functionality. I know I can resort to CSS and jQuery if needed and in fact am doing that, but I'm still curious as to how to override the menu system.
Just style the list propperly
li { list-style-type:none; }
li:before { content:"/ "; }
http://jsfiddle.net/sVvs8/
I have some code in HTML and CSS where HTML looks like this:
<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li>Welcome!</li>
And my CSS looks like this:
#avmenu
{
Style details
}
#avmenu li a:hover
{
Style details
}
a:hover{ Hover styles }
So above piece of code shows a menu item and does some animation like color change etc when you hover your mouse over the menu. I have show bare minimum styles sufficient to explain problem at hand.
Now when I migrate this to GWT. We have used Label as menu items, and I want to achieve same effect in GWT too. Here is what I have tried
I tried to apply CSS Style named "avmenu", this applied basic styles, but of course didn't get animation
Then I tried DOM.setElementAttribute(orgLbl.getElement(), "id", "avmenu"); but that also didn't help.
What would be my best option with minimal time and effort to achieve same effect? I can of course listen to events on Label and then change the style, but doing that for all of the widgets would be an overkill!
EDIT- More info: I am building Menu using Label, and adding that to tree
userMgmtLbl = new Label("User mgmt");
userMgmtLbl.setStyleName(HOME_MENU_LBL_STYLE);
treeItem_1 = configParentTL.addItem(userMgmtLbl);
userMgmtLbl.addClickHandler(Click logic)
One of the problems that you're running into is that Tree and TreeItem in GWT are composed of arbitrary divs, rather than ul and li as in your original html. (When indoubt you can inspect the DOM of GWT's showcase to see how the underlying widgets are created).
What this means is that your selectors, such as "#avmenu li a:hover" will no longer work.
If your navigation menu is static, your best bet is probably to use GWT ui-binders, which are basically gwts templating system. If you use a HTMLPanel as your root widget, you can effectively use all your original HTML verbatim and not worry about trying to mash all the DOM elements into corresponding widgets.
A basic widget would look something like this:
NavigationWidget.java
public final class YourWidget extends Composite {
YourWidget() {
initWidget(binder.createAndBindUi(this));
}
private static final Binder binder = GWT.create(Binder.class);
interface Binder extends UiBinder<Widget, YourWidget> {}
}
NavigationWidget.ui.xml
<ui:UiBinder
xmlns:gwt="urn:import:com.google.gwt.user.client.ui"
xmlns:ui="urn:ui:com.google.gwt.uibinder">
<gwt:HTMLPanel>
<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li>Welcome!</li>
</div>
</gwt:HTMLPanel>
</ui:UiBinder>
As an aside, in this example HTMLPanel adds a DIV of its own to the DOM, making the second div a bit redundant. Unfortunately, widgets in gwt don't have an easy way of setting the ID attribute from templates, so you're stuck with the second div unless you want to switch your #avmenu selector to .avmenu
Post how you are building menu in GWT. You are probably not using anchors inside your labels so your :hover styles are obviously not working.
Is there a way to limit a css to only apply to what is in a content area and not the entire page?
I have an ASP.NET 4.0 app. I obtained some from someone else that I don't understand (It's javascript and uses a css). By his instructions, I put it on the page to style a list (UL). All of this occurs within a content place holder. However, now some UL's on the MasterPage are also being affected by this style.
Is the content placeholder an html element - if so you can add a class or id to that and use it to limit the css styling for your ul's to only those in the "main" section. If not, you may need to wrap your content in an extra div:
e.g.
<div id="main">
<!-- content here including the ul -->
</div>
then the css to style that is:
#main ul
{
// styling here
}
As Kris says, you can use an id selector. This is "The right way" to do it.
If that won't work due to your constraints (running impenetrable mystery code), you may need another option.
Fortunately, the kludge is pretty straightforward too: put the app in an iframe and host it from a separate, blank page.