Getting some off behaviour with my Bootstrap horizontal navigation, for some reason it seems to be adding an extra anchor link into the first <li><!-- here --></li> element.
Code:
<li class='submenu'>
<a href='#'>
<img src='{{ URL::asset('img/menu/performance.png') }}' /> Performance
<ul class='nav'>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
</ul>
</a>
</li>
What Chromes Inspector says:
<li class="submenu">
<a href="#">
<img src="https://xxxxxx/img/menu/performance.png"> Performance
</a>
<ul class="nav" style="display: block;"><a href="#">
</a><li><a ref="#">abc</a></li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
Any one got an idea's of why this is happening? I hacky fixed it with the following CSS:
.left-nav .submenu li:nth-child(2) > a:first-child {
display:none;
}
You should not have any links inside another link.
This is not valid HTML.
If the browser encounters a link tag while already inside a link tag it will add
the closing tag for the first link.
I was using links within links, causing this to happen. I have moved the secondary <ul> outside of the anchor tab and its now working.
Related
I have an <ul> to do a menu bar. The bar is vertical on the left of my screen. When an option is selected out of the first visible section, I will use JS to hide the first block and set the remaining blocks to .show()
on the next chunk based on the option selected. Now, I have no problem with the JS portion of this. My problem is - when I .hide() and .show() the <li> groups, they stay as if the others were present (large gaps in between options vs top aligned).
Here is a sample of my list:
<ul class="menu">
<li><a id="mainSuit" href="javascript: void(0)">Suit</a></li>
<li><a id="mainFinances" href="javascript: void(0)">Finances</a></li>
<li><a id="mainMissions" href="javascript: void(0)">Missions</a></li>
<li><a id="mainTerritory" href="javascript: void(0)">Territory</a></li>
<li><a id="mainCompany" href="javascript: void(0)">Company</a></li>
<li><a id="mainTravel" href="javascript: void(0)">Travel</a></li>
</ul>
<!-- More <ul> between the two -->
<ul class="menu">
<li><a id="suitLoadout">Loadout</a></li>
<li><a id="suitEquipment">Equipment Market</a></li>
<li><a id="suitMunitions">Munitions Surplus</a></li>
<li><a id="suitRefuel">Refuel</a></li>
<li><a id="suitRepair">Repair</a></li>
</ul>
For CSS
#suitRepair {
display: none;
}
/* same for all of the IDs */
So when id mainSuit is selected - all of <ul class="menu"> will be hidden and the section for suit is shown.
How would I get it so that any gaps for UL blocks between these too are removed.
Just try specify the id on < li > instead < a >:
<li><a id="suitLoadout">Loadout</a></li>
will be:
<li id="suitLoadout"><a>Loadout</a></li>
Now you will hide the < li > tag not the content of that tag, so the space gap will be solved ;)
UPDATED
Even better - use the <ul> as the identifier and go that route:
<ul id="mainMenu">
<li id="mainSuit"><a onclick="mainSuit()" href="javascript: void(0)">Suit</a></li>
</ul>
<ul id="suitMenu">
<li id="suitLoadout"><a>Loadout</a></li>
<li id="suitEquipment"><a>Equipment Market</a></li>
<li id="suitMunitions"><a>Munitions Surplus</a></li>
<li id="suitRefuel"><a>Refuel</a></li>
<li id="suitRepair"><a>Repair</a></li>
</ul>
With JS of:
function backSelected() {
$("#mainMenu").show();
$("#suitMenu").hide();
}
function mainSuit() {
$("#mainMenu").hide();
$("#suitMenu").show();
}
I don't know anything about HTML codes and I'm using a template I used online for my blog, www.lemontierres.com. I have some links to pages at the top of my blog but I want to have them in the center instead of on the left side of my blog, and I don't know how to fix this? I Googled and found some answers but I don't know how to apply them to my situation. Any help would be appreciated!
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li>about me</li>
<li>contact/business inquiries</li>
<li><a class='drop-ctg' href='#'/>
<ul>
<li><a href='#'> 1</a></li>
<li><a href='#'> 2</a></li>
<li><a href='#'> 3</a></li>
<li><a href='#'> 4</a></li>
</ul>
</ul>
Simple CSS would solve this
ul {
text-align: center;
}
I think this is what you are looking for. The first CSS puts all of the <li> elements inline rather than stacked and the second centers all of the text.
ul.menu li {
display: inline;
}
ul {
text-align: center;
}
JSFIDDLE DEMO
put <center>
<ul>
<li>link</li>
<li>Link2</li>
</ul>
</center>
That is how I would do it.
Basically you just need to put the center tags around the code for the links.
If that doesnt work do what JRULLE and Vector said.
This is the a litle piece from a menu:
<li>Some Text
Now I want that after SOME TEXT to be 1 2 3 and when I click 1 2 3 to link me to another link, it has to be inside the >Some Text </a>.
Some ideas?
I'm not sure if that's what you are searching for:
<ul id="mega-menu-1" class="mega-menu">
<li>Products
<ul>
<li>Vehicles
<ul>
<li><a id="in_a_row" href="#">Coupe
<div class="cars">
<a class="car" href="#">1</a>
<a class="car" href="#">2</a>
<a class="car" href="#">3</a>
</div>
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
For styling of the elements you can use this CSS code:
.cars,
.car,
#in_a_row
{
display: inline !important;
}
Use !important to overwrite styles which have been defined by the plugins CSS file.
Here you can grab the source code. Just replace the index.html of the plugin with that code.
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.
I have the following code and I want to highlight the currently selected tab using css.
<div id="Maintabs">
<ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
is there any way I can do this? I know css hover gives the element on which mouse is hovere, is there something similar for selected
thanks guys,
yes I do need dynamic handling, so I did the way you told. I capture the click event on that tab and the class. in css I apply the required styles to that class but it doesn't work.
here is my code:
in javaScript:
$('#summary').click(function(){
$(this).addClass("selected");
alert(" summary");
});
HTML code:
<div id="Maintabs">
<ul>
<li style="width: 100px;"><a id="summary" href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li style="width: 100px;"><a id="advanced" href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li style="width: 100px;"><a id="expert" href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
CSS code:
.selected{
background-color:#FEE0C6;
}
what do you think I am doing wrong??
I'm not sure how you are using pure CSS to produce a tab effect. You would normally need Javascript or jQuery to dynamically change what the current tab is.
However, if you are using Javascript or jQuery for the tab effect, you could simply add a class to highlight the selected tab.
For example, this could be your jQuery:
$("#tab1").addClass("selected-tab");
And this your CSS:
.selected-tab
{
/*Some style to highlight it and show it's the selected tab*/
}
You're going to want to make an active class. By giving your li the defined class active. Then you can use css to make the .active a different color, size, shape, etc
Here's an example (first li):
HTML
<div id="Maintabs">
<ul class"tablist">
<li class="active"><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
Here's an example (second li):
HTML
<div id="Maintabs">
<ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li class="active"><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
Here's an example (third li):
HTML
<div id="Maintabs"> <ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li class="active"><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
CSS
#maintabs.active {background-color: #000;}
#maintabs {background-color: #ccc;}
The result will be the active tab being black (#000), and the inactive tabs being light grey (#ccc)