There is an issue where the active class is not being removed when you navigate to another tab. This means you can not visit the same tab more than once.
https://codepen.io/anon/pen/zdjawq
A working example of tabs can be seen in example two of the following pen
https://codepen.io/wizly/pen/BlKxo
<div id="exTab2" class="container">
<ul class="nav nav-tabs">
<div class="col-md-2">
<li>
<a href="#1" data-toggle="tab">
<img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
</a>
</li>
</div>
<div class="col-md-2">
<li>
<a href="#2" data-toggle="tab">
<img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
</a>
</li>
</div>
<div class="col-md-2">
<li class="active">
<a href="#3" data-toggle="tab">
<img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
</a>
</li>
</div>
<div class="col-md-2">
<li>
<a href="#4" data-toggle="tab">
<img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
</a>
</li>
</div>
<div class="col-md-2">
<li>
<a href="#5" data-toggle="tab">
<img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
</a>
</li>
</div>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1">
test
</div>
<div class="tab-pane" id="2">
cont
</div>
<div class="tab-pane active" id="3">
other
</div>
In your code you need to remove divs between ul and li elements. That is breaking the right DOM structure for tabs to work correctly.
Related
i have this code and its working but not properly.
<div class="row">
<div class="col-4">
<strong>Ⅰ. Main A</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
<li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
<li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
</ul>
<strong>Ⅱ Main B</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
</ul>
</div>
<div class="col-8 border-left ">
<div class="tab-content ">
<div class="tab-pane scroll-able" id="item1">
<h3>A 1</h3>
</div>
<div class="tab-pane scroll-able" id="item2">
<h3>A 2</h3>
</div>
<div class="tab-pane scroll-able" id="item3">
<h3>A 3</h3>
</div>
<div class="tab-pane scroll-able" id="item4">
<h3>B 1</h3>
</div>
</div>
</div>
when i click each once its showing the content correctly
but its not working properly and leaving the active and show class when i click on different submenu (ex. B1 and A3 back-and-forth )
my data is dynamic.
I've played a bit and noticed what you reported, then I went to Bootstrap source which tells it is a BS limitation (see show method).
Then the simple options I see are basically 2:
Handle the tabs clicks manually: https://getbootstrap.com/docs/4.0/components/navs/#via-javascript
Working example: https://codepen.io/cdtapay/pen/bzegNB
Not being semantic and keeping all of the links in the same list (ul), including the section labels. Working example: https://codepen.io/cdtapay/pen/QYNRwb
Hope it helps.
UPDATE
: There is an issue reported about the show class being leaked: https://github.com/twbs/bootstrap/issues/28118
I have tested it on codepen, and it works like a charm, the active class is removed when clicking another toggle.
https://codepen.io/fazlurr/pen/QYNPBe
<div class="row">
<div class="col-4">
<strong>Ⅰ. Main A</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
<li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
<li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
</ul>
<strong>Ⅱ Main B</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
</ul>
</div>
<div class="col-8 border-left ">
<div class="tab-content ">
<div class="tab-pane scroll-able" id="item1">
<h3>A 1</h3>
</div>
<div class="tab-pane scroll-able" id="item2">
<h3>A 2</h3>
</div>
<div class="tab-pane scroll-able" id="item3">
<h3>A 3</h3>
</div>
<div class="tab-pane scroll-able" id="item4">
<h3>B 1</h3>
</div>
</div>
</div>
Maybe the way you generate the ids is not right.
Best regard,
I have a menu and i want to use the active class active with url format but I don't know how:
<div class="col-sm-6">
<div class="menul">
<a href="#">
<div>
<img src="image" alt="">
<span class="sombra"></span>
<img class="onhover" src="image" alt="image">
</div>
</a>
</div>
</div>
$(".menul a").each(function() {
if (this.href == window.location.href)
$(.onhover).addClass("active");
})
try to implement with navbar nav class example below
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<img src="img" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img" alt="image">
</a>
</li>
</ul>
I am new to using the ratchet framework so I am probably missing something basic. I want to use a toggle to hide a div when the toggle is off, and display it when the toggle is on. I know the toggle name changes to toggle active when it's active but the code I found from a few other posts does not seem to be working in my situation. Any help is appreciated.
Thanks
HTML
<div class="content">
<div id="map"></div>
<ul class="table-view">
<li class="table-view-cell">
Stages
<div id="toggle1" class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Washrooms
<div class="toggle ">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Foods
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Security
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
First Aid
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
ATM
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div id="Stage1" class="StageMain">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageSecond">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageThird">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
</div>
Javascript
if(document.getElementById("toggle1").className == 'toggle active')
{
$('#Stage1').show();
}
else
{
$('#Stage1').hide();
}
you should use a handle to show/hide your element.
visit this link http://www.w3schools.com/jquery/jquery_hide_show.asp
check this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var status = 'show';
function change()
{
if(status == 'show')
{
document.getElementById("toggle1").style.display = 'none';
status = 'hide';
}
else
{
document.getElementById("toggle1").style.display = 'block';
status = 'show';
}
}
</script>
</head>
<body>
<div class="content">
<div id="map"></div>
<ul class="table-view">
<li class="table-view-cell" onclick="change()">
Stages (click here)
<div id="toggle1" class="toggle">this is test
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell" >
Washrooms
<div class="toggle ">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Foods
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Security
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
First Aid
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
ATM
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div id="Stage1" class="StageMain">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageSecond">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageThird">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
</div>
</body>
</html>
I am trying to add pagination to the bottom of the page which allows the user to move from a group of thumbnail images to another. The page is a gallery page that the user can click the thumbnails on the left to change the slideshow on the right.
HTML
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-sm-6" id="slider-thumbs firstpage">
<!-- Bottom switcher of slider -->
<ul class="hide-bullets">
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-0">
<img src="images/thumbnails/img1.jpg">
</a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-1"><img src="images/thumbnails/img2.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-2"><img src="images/thumbnails/img3.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-3"><img src="images/thumbnails/img4.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-4"><img src="images/thumbnails/img5.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-5"><img src="images/thumbnails/img6.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-6"><img src="images/thumbnails/img7.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-7"><img src="images/thumbnails/img8.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-8"><img src="images/thumbnails/img9.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-9"><img src="images/thumbnails/img10.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-10"><img src="images/thumbnails/img11.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-11"><img src="images/thumbnails/img12.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-12"><img src="images/thumbnails/img13.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-13"><img src="images/thumbnails/img14.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-14"><img src="images/thumbnails/img15.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-15"><img src="images/thumbnails/img16.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-16"><img src="images/thumbnails/img17.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-17"><img src="images/thumbnails/img18.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-18"><img src="images/thumbnails/img19.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-19"><img src="images/thumbnails/img20.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-2 hide-thumbnail" id="carousel-selector-20"><img src="images/thumbnails/img21.jpg"></a>
</li>
</ul>
<nav>
<ul class="pagination">
<li>
<a aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a id="pag-1">1</a></li>
<li><a id="pag-1">2</a></li>
<li><a id="pag-3">3</a></li>
<li><a id="pag-4">4</a></li>
<li><a id="pag-5">5</a></li>
<li>
<a aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-sm-6">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="images/img1.jpg"></div>
<div class="item" data-slide-number="1">
<img src="images/img2.jpg"></div>
<div class="item" data-slide-number="2">
<img src="images/img3.jpg"></div>
<div class="item" data-slide-number="3">
<img src="images/img4.jpg"></div>
<div class="item" data-slide-number="4">
<img src="images/img5.jpg"></div>
<div class="item" data-slide-number="5">
<img src="images/img6.jpg"></div>
<div class="item" data-slide-number="6">
<img src="images/img7.jpg"></div>
<div class="item" data-slide-number="7">
<img src="images/img8.jpg"></div>
<div class="item" data-slide-number="8">
<img src="images/img9.jpg"></div>
<div class="item" data-slide-number="9">
<img src="images/img10.jpg"></div>
<div class="item" data-slide-number="10">
<img src="images/img11.jpg"></div>
<div class="item" data-slide-number="11">
<img src="images/img12.jpg"></div>
<div class="item" data-slide-number="12">
<img src="images/img13.jpg"></div>
<div class="item" data-slide-number="13">
<img src="images/img14.jpg"></div>
<div class="item" data-slide-number="14">
<img src="images/img15.jpg"></div>
<div class="item" data-slide-number="15">
<img src="images/img16.jpg"></div>
<div class="item" data-slide-number="16">
<img src="images/img17.jpg"></div>
<div class="item" data-slide-number="17">
<img src="images/img18.jpg"></div>
<div class="item" data-slide-number="18">
<img src="images/img19.jpg"></div>
<div class="item" data-slide-number="19">
<img src="images/img20.jpg"></div>
<div class="item" data-slide-number="20">
<img src="images/img21.jpg"></div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<!--/Slider-->
</div>
</div>
</div>
CSS
.hide-thumbnail{
display: none;
}
.show-thumbnail{
display: block;
}
Jquery
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
function ThumbnailPagination(){
jQuery('#pag-1').live("click", function(){
jQuery('.page-1').removeClass("hide-thumbnail");
jQuery('.page-1').addClass("show-thumbnail");
});
jQuery('#pag-2').live("click", function(){
jQuery('.page-1').removeClass("show-thumbnail");
jQuery('.page-1').addClass("hide-thumbnail");
jQuery('.page-2').removeClass("hide-thumbnail");
jQuery('.page-2').addClass("show-thumbnail");
});
};
</script>
I'm basically trying to hide/show the thumbnails when each <a> pagination number is clicked. However it normally only works once, and sometimes doesn't even work at all. Currently only "1" works, "2" doesn't even do anything.
LINK to website Website Link
I have solved my problem here was the solution
HTML
<nav>
<ul class="pagination">
<li>
<a aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a id="pag-1">1</a></li>
<li><a id="pag-2">2</a></li>
<li>
<a aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
JQuery
$(document).ready(function() {
$('#pag-1').on("click", ThumbnailPagination1);
});
$(document).ready(function() {
$('#pag-2').on("click", ThumbnailPagination2);
});
function ThumbnailPagination1(){
jQuery('.page-1').removeClass("hide-thumbnail");
jQuery('.page-1').addClass("show-thumbnail");
jQuery('.page-2').removeClass("show-thumbnail");
jQuery('.page-2').addClass("hide-thumbnail");
};
function ThumbnailPagination2(){
jQuery('.page-1').removeClass("show-thumbnail");
jQuery('.page-1').addClass("hide-thumbnail");
jQuery('.page-2').removeClass("hide-thumbnail");
jQuery('.page-2').addClass("show-thumbnail");
};
I need to make a mega menu/mashable like menu similar to one as show in image below
So far i have been able to make it work to some extent example on jsFiddle HERE.
this has some design issue and one functionality issue.
When i try to hide the default text for each dropdown menu //$(this).find(".nav-info").hide(); then Menu 4 & 5 doesn't show up on right side.
I am actually trying to create a menu similar to one as on this website.
One this website they also show a default text for parent menu which i don't need actually.
I modified script to show the first li of sub-menu it works find for Parent menu ONE, TWO but creates alignment problem for MENU FOUR and FIVE.
I would appreciate if some can help me fix this issue...
CODE
<div class="container_16">
<div class="nav-main grid_16">
<div class="wrap-nav-media">
<ul id="nav-top-media">
<!-- ONE -->
<li class="nav-item-1">Parent Menu One
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../directors" rel="sub-1-relative-1">sub-1-relative-1</a>
</li>
<li class=""><a class="current" href="../management-team" rel="sub-1-relative-2">sub-1-relative-2</a>
</li>
<li class="last"><a class="current" href="../tems.html" rel="sub-1-relative-3">sub-1-relative-3</a>
</li>
</ul>
<div style="display: block;" class="menu-page first" id="mega-sub-1-relative-1"> <a href="../board-of-directors" title="Board of Directors" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-1</p>
</div>
</div>
<div style="display: block;" class="menu-page" id="mega-sub-1-relative-2"> <a href="../management-team" title="Management Team" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow; float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-1-relative-3"> <a href="../vision.html" title="Vision" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-3</p>
</div>
</div>
</div>
</li>
<!-- TWO -->
<li class="nav-item-2"> Parent Menu TWO
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../infrastructure" rel="sub-2-relative-1">sub-2-relative-1</a>
</li>
<li class=""><a class="current" href="..capabilities/building" rel="sub-2-relative-2">sub-2-relative-2</a>
</li>
<li class="last"><a class="current" href="..capabilities/rail" rel="sub-2-relative-3">sub-2-relative-3</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-2-relative-1"> <a href="../infrastructure" title="Infrastructure" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-1</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-2"> <a href="../building" title="Building" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-3"> <a href="/rail" title="Rail" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-3</p>
</div>
</div>
</div>
</li>
<li class="nav-item-3">THREE
</li>
<li class="nav-item-4"> FOUR
<div style="display: none;" class="inner-nav-media">
<div style="display: block; float:right;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title=" Businesses" href="../businesses">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<ul>
<li class=""> <a class="current" href="2.html" rel="sub-4-relative-1">sub-4-relative-1</a>
</li>
<li class=""> <a class="current" href="1.html" rel="sub-4-relative-2">sub-4-relative-2</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-4-relative-1"> <a href="../group.html" title="" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20110602_1-ARG.jpg" alt="">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-4-relative-2"> <a href="../advance-water-and-environmentawe.html" title="Advance Water and Environment (AWE)" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20121024_AWG-220x165.jpg" alt="Advance Water and Environment (AWE)">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
</div>
</li>
<li class="last nav-item-5">FIVE
<div style="display: none;" class="inner-nav-media">
<div style="display: block;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title="" href="">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>This is Default text when i try to hide this then this menu moves to left</p>
</div>
</div>
<ul>
<li class=""><a class="current" href="" rel="sub-5-relative-1">sub-5-relative-1</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-2">sub-5-relative-2</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-3">sub-5-relative-3</a>
</li>
<li class="last"><a class="current" href="" rel="sub-5-relative-4">sub-5-relative-4</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-5-relative-1"> <a href="/safety.html" title="" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-2"> <a href="/environment.html" title="Environment" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-3"> <a href="/community.html" title="Community" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-4"> <a href="/quality.html" title="Quality" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-4</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>