I am having trouble aligning a <ul><li> with an existing navigation. The more option floats on top of the second option. How to make them all aligned?
Code:
<div id="nav">
name
<ul id="test">
<li>Post
<ul>
<li><a id="thestuff" href="#">Post Article</a></li>
<li><a id="thestuff" href="#">Post Book</a></li>
<li><a id="thestuff" href="#">Post Other</a></li>
<li><a id="thestuff" href="#">Post Other</a></li>
<li><a id="thestuff" href="#">Post Other</a></li>
<li><a id="thestuff" href="#">Post Other</a></li>
<li><a id="thestuff" href="#">Post Other</a></li>
<li><a id="thestuff" href="#">Post Other</a></li>
<li><a id="thestuff" href="#">Post Other</a></li>
<li><a id="thestuff" href="#">Post Other</a></li>
</ul>
</li>
</ul>
Article
Books
Other
Other
Other
Other
Other
</div>
CSS:
#nav {
margin-left: 230px;
margin-top:-19px;
}
#option {
margin-left:20px;
}
I am not using anything for thestuff tag.
Use a class for elements that you have more than one of.
By definition an id has to be unique
Related
If I define my block on the li tag, TBS only shows the first item in the array.
<ul class="nav navbar-nav">
<li class="dropdown nav-item">
Logs<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a class="file" href="/logs/#[logs.key; block=li]">[logs.key]</a></li>
</ul>
</li>
<li class="nav-item">Settings</li>
<li class="nav-item"><span class="navbar-text" id="grepspan"></span></li>
<li class="nav-item"><span class="navbar-text" id="invertspan"></span></li>
</ul>
If I define the block on the a tag, it shows all the items in the array.
<ul class="nav navbar-nav">
<li class="dropdown nav-item">
Logs<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<a class="file" href="/logs/#[logs.key; block=a]">[logs.key]</a>
</ul>
</li>
<li class="nav-item">Settings</li>
<li class="nav-item"><span class="navbar-text" id="grepspan"></span></li>
<li class="nav-item"><span class="navbar-text" id="invertspan"></span></li>
</ul>
What am I doing wrong here?
How to add/remove active class for SIDENAV onclick event?
<nav class="sidenav">
<section class="sidenav-content">
<a href="..." class="nav-link active">
Nav Element 1
</a>enter code here
<a href="..." class="nav-link">
Nav Element 2
</a>
<section class="nav-group collapsible">
<input id="tabexample1" type="checkbox">
<label for="tabexample1">Collapsible Nav Element</label>
<ul class="nav-list">
<li><a class="nav-link">Link 1</a></li>
<li><a class="nav-link">Link 2</a></li>
</ul>
</section>
<section class="nav-group">
<input id="tabexample2" type="checkbox">
<label for="tabexample2">Default Nav Element</label>
<ul class="nav-list">
<li><a class="nav-link">Link 1</a></li>
<li><a class="nav-link">Link 2</a></li>
<li><a class="nav-link active">Link 3</a></li>
<li><a class="nav-link">Link 4</a></li>
<li><a class="nav-link">Link 5</a></li>
<li><a class="nav-link">Link 6</a></li>
</ul>
</section>
</section>
</nav>
I want to show the ul class of li which is clicked.
My html is:
<ul id="level1" class="category">
<li class="level1 inactive">
abc
<ul id="level2" style=" display:none;">
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
</ul>
</li>
<li class="level1 inactive">
xyz
<ul id="level2" style=" display:none;">
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
</ul>
</li>
<li class="level1 inactive">
bcd
<ul id="level2" style=" display:none;">
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
</ul>
</li>
</ul>
the js which I use to show the ul is below:
<script>
var $j = jQuery.noConflict();
$j(function() {
$j('li.level1').click(function() {
$j(this).addClass("current").removeClass("inactive");
$j('ul#level2:visible').hide();
$j('ul#level2').toggle();
});
});
</script>
css:
ul.category li.level1.current a{background:url("../images/left_menu_new.png") no-repeat scroll 10px -285px transparent;}
.active{display:block;}
When I click the li.level1 current class design is added to every li of level1 , ul inside the selected li is opened and as it has anchor tag the page is redirected to the url inside the anchor tag .
What I want is when I click the li the current class should be added only to the selected li & the page of respective url in the anchor tag should be opened and ul of selected li should be opened there.
Kindly guide me to resolve this issue.
For you to achieve this, you will have to take advantage of location hash.
Do the following :
On your anchor tags, that toggle your ul, add href to a dummy unique value. Make sure the value is same as the id of the li you are in.
<ul class="level0">
<li class="level1" id="li1">
Toggle.1
<ul class="level1" style="display:none;">
When ever page loads, read window location hash.
var li = window.location.hash;
If hash is found, show the related ul.
if(li!=""){
$(li + " ul").show();
}
This way you will be able to show the last opened ul by the user.
$(function() {
var li = window.location.hash;
if (li != "") {
$(li + " ul").show();
}
$('li.level1 a').click(function() {
$(this).parent().siblings().each(function() {
$(this).find("ul.level1").hide();
});
$(this).siblings("ul.level1").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="level0">
<li class="level1" id="li1">
Toggle.1
<ul class="level1" style="display:none;">
<li class="level2">Level2.1
</li>
<li class="level2">Level2.1
</li>
<li class="level2">Level2.1
</li>
</ul>
</li>
<li class="level1" id="li2">
Toggle.2
<ul class="level1" style="display:none;">
<li class="level2">Level2.2
</li>
<li class="level2">Level2.2
</li>
<li class="level2">Level2.2
</li>
</ul>
</li>
<li class="level1" id="li3">
Toggle.3
<ul class="level1" style="display:none;">
<li class="level2">Level2.3
</li>
<li class="level2">Level2.3
</li>
<li class="level2">Level2.3
</li>
</ul>
</li>
</ul>
<ul class="pagination">
<li class="arrow unavailable">«</li>
<li class="current">1</li>
<li><a
<li><a onclick="3</a></li>
<li><a onclick="4</a></li>
<li><a onclick="5</a></li>
<li><a onclick="6</a></li>
<li><a onclick="7</a></li>
<li class="unavailable">…</li>
<li><a onclick="21);return false;" href="#">21</a></li>
How would I select all "A" in between current and unavailable?
To those that read this in the future, this is what worked for me.
/UL[1]/LI[#class=''][span("li[#class='unavailable']")][#class != 'current']/a
I have a problem with my newly created Blogspot site ( http://www.sanzuu.blogspot.com ) .
Sub Menu of a Horizontal Drop down Menu is not overflowing. It is visible partly up to the main Post body. Please help me.
<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link'href='http://sanzuu.blogspot.com'><span>HOME</span> </a></li>
<li class='top'><a class='top_link' href='http://sanzuu.blogspot.com/search/label/ELECTRONICS?max-results=5'><span class='down'>ELECTRONICS</span></a>
<ul class='sub'>
<li><a href='http://sanzuu.blogspot.com/search/label/BASIC%20ELECTRONICS?max- results=5'>BASIC ELECTRONICS</a></li>
<li><a href='http://sanzuu.blogspot.com/search/label/COMPUTER?max- results=5'>COMPUTER</a></li>
<li><a href='http://sanzuu.blogspot.com/search/label/MOBILE PHONE?max-results=5'>MOBILE PHONE</a></li>
<li><a href='http://sanzuu.blogspot.com/search/label/HOME%20APPLIANCES?max-results=5'>HOME APPLIANCES</a></li>
<li><a href='http://sanzuu.blogspot.com/search/label/CIRCUIT%20DESIGN?max-results=5'>CIRCUIT DESIGN</a></li>
<li><a href='http://sanzuu.blogspot.com/search/label/ELECTRONICS%20PROJECT?max-results=5'>ELECTRONICS PROJECT</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='http://sanzuu.blogspot.com/search/label/TUTORIALS?max-results=5'><span class='down'>TUTORIALS</span></a>
<ul class='sub'>
<li><a href='http://sanzuu.blogspot.com/search/label/COMPUTER?max- results=5'>COMPUTER</a></li>
<li><a href='http://sanzuu.blogspot.com/search/label/MOBILE?max-results=5'>MOBILE</a> </li>
<li><a href='http://sanzuu.blogspot.com/search/label/INTERNET?max- results=5'>INTERNET</a></li>
<li><a href='http://sanzuu.blogspot.com/search/label/RUBIKs%20CUBE?max- results=5'>RUBIKs CUBE</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='http://sanzuu.blogspot.com/search/label/VIDEOS?max-results=5'><span class='down'>VIDEOS</span></a>
<ul class='sub'>
<li><a href='http://sanzuu.blogspot.com/search/label/PLACE%20TO%20VISIT?max- results=5'>PLACE TO VISIT</a></li>
<li><a href='http://sanzuu.blogspot.com/search/label/GAMING?max-results=5'>GAMING</a> </li>
</ul>
</li>
<li class='top'><a class='top_link' href='http://sanzuu.blogspot.com/search/label/WHAT%20IT%20IS%20?max-results=5'>WHAT IT IS ? </a></li>
<li class='top'><a class='top_link' href='http://sanzuu.blogspot.com/search/label/RECIPE?max-results=5'><span>RECIPE</span></a> </li>
<li class='top'><a class='top_link' href='http://sanzuu.blogspot.com/search/label/COMPLAINTS?max-results=5'>COMPLAINTS</a></li>
<li class='top'><a class='top_link' href='http://sanzuu.blogspot.com/p/contact- us.html'>CONTACT US</a></li>
<!-- Search Bar -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Search here...";' onfocus='if (this.value == "Search here...") this.value = "";' size='28' type='text' value='Search here...'/></form>
</li>
</ul>
</div>
The cut off submenu is because you have the property overflow:hidden on your .tabs-outer container element.
Just track down that style and change it to:
.tabs-outer{
overflow:visible;
}
Here's a JSfiddle showing you the applied style - note that the submenus are no longer cut off. Hope this helps! Let me know if you have any questions.
(Note that in the future, please attempt to include the relevant CSS as well - otherwise, the question becomes harder to answer and also less useful to others who read it later.)