I want to have the class="children" centered in the middle of the page container preferably using css only but if it is not possible you can provide the best js answer. Currently it is just a normal drop down but I want to use it as a mega menu. If I have to add another div structure that's fine.
<div class="main-navigation-wrapper">
<div class="nav pull-left">
<div class="menu-main-menu-container">
<ul id="menu" class="menu no-dropdown">
<li class="menu-item">
Blog
<div class="children">
--- Children items are here
</div>
</li>
</ul>
</div>
</div>
</div>
I have seen some other examples but have attempted a few and none of them center it. I want to find a dynamic approach to where no matter the location of the link in the menu it always centers the menu in the container.
EDIT: Fiddle found here http://jsfiddle.net/YzJ4h/
The simplest would be to add this CSS to horizontaly center your mega menu items :
CSS :
#menu li, .second-menu li {
display:inline-block;
position:relative;
}
#menu > li.mega_width {
display:inline-block;
position:static;
}
#menu > li.mega_width > .children {
position:absolute;
left:0;
right:0;
top:auto;
margin:auto;
}
DEMO
Do a small change in your code:
<div class="main-navigation-wrapper">
<div class="nav pull-left">
<div class="menu-main-menu-container">
<ul id="menu" class="menu no-dropdown" style="margin: auto;">
<li class="menu-item">
Blog
<div class="children">
--- Children items are here
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="main-navigation-wrapper">
<div class="nav pull-left">
<div class="menu-main-menu-container">
<ul id="menu" class="menu no-dropdown" style="margin: auto;">
<li class="menu-item four">
Blog
<div class="children">
--- Children items are here
</div>
</li>
</ul>
</div>
</div>
Here is a rough example of what you're looking for:
http://jsfiddle.net/m8Vj4/
A couple main tips:
position:absolute; / position:relative;
position:absolute will position something relative to its nearest parent that has position:relative. In your case you are positioning the .children elements relative to their parent li, whereas you want them to be positioned relative to .main-navigation-wrapper
Centering an element with display:inline-block;
You can center elements with display:block by adding margin:0 auto, however this won't work for elements with display:inline-block. Instead, you can set text-align:center on their parent, and text-align:left on themselves so they don't inherit centered text.
Hope that helps... reworking your existing HTML/CSS would have taken too much time.
I took some liberty and added some CSS in your existing code. Those are -
.main-navigation-wrapper{width: 1140px; margin: 0 auto; background: #E5F0FF;}
#menu{text-align:center; padding:0px; position:relative;}
#menu li.mega-three.fullwidth{position:static;}
#menu .mega-three div.children{left:0px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;}
Here is a fiddle.
Hope it will work for you. :-)
You can made certain modifications in your code. Like to avoid scrollbar in children div you have to use width:auto , and some position settings. Please do check with the code below. It may help you.
.menu-main-menu-container ul#menu .children {
left: 0;
position: absolute;
width: auto;
}
.menu-main-menu-container ul#menu .children:hover {
visibility: visible;
}
.menu.no-dropdown {
position: relative;
position:static;
}
Modify class
#menu li, .second-menu li{
position:static;
}
For the inner sub menus inside the children div,
.menu-main-menu-container ul#menu .children .children {
position: relative;
}
You can please check it on fiddle
http://jsfiddle.net/YzJ4h/4/
Give it Width something like 50% to you outer div and set margin:0 auto;
style="margin:0 auto;"
Related
I am trying to show line as an indicator for active section in fullpage.js based page.
This page has several section & subsection and active section should show as a horizontal red line upto active nav.
for example if i am on section one then line should be of teh width of first section and if i am on section section the line width should be upto end of section section and so.
Link for codepen
<div id="fullpage">
<div class="section" data-anchor="one">Section One</div>
<div class="section" data-anchor="two">Section Two</div>
<div class="section">Section Two sub page one</div>
<div class="section">Section Two sub page two</div>
<div class="section" data-anchor="three">Section Three</div>
<div class="section" data-anchor="four">Section Four</div>
</div>
<div class="nav-wrapper">
<hr>
<ul id="myMenu">
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
</ul>
</div>
.section {
text-align:center;
font-size: 3em;
}
.content{
margin:50px
}
#myMenu{position:absolute; background-color:#eee; top:0; width:100%; margin:0px !important; padding:0px !important;}
.active{font-size:15px; background-color:purple; }
.nav-wrapper{position:absolute; height:20px; bottom:0;width:100%; z-index:999999999; background:blue;}
.nav-wrapper > ul li {list-style:none; display:inline-block; padding:0px !important; margin:0px ; margin-left:-4px; text-align:center;}
.nav-wrapper ul li{width:calc(100% / 4);}
hr {
background: #f00 none repeat scroll 0 0;
height: 5px;
position: relative;
width: 100%;
z-index: 999999999;
margin:-5px
}
how can i do this using jquery
Since some of your pages are subpages that don't exists in your menu you will have to extract the pages and save them in a different variable:
var visibleMenuSections = $('#myMenu a').map(function() {
return $(this).attr('href').substr(1);
}).get()
Now this variable contains an Array of the links:
["one", "two", "three", "four"]
Once you have this array you can use the callback afterLoad of the fullpage to set the with of the hr after each page change:
afterLoad: function(anchorLink, index) {
p = visibleMenuSections.indexOf(anchorLink);
if (p > -1) {
$('.nav-wrapper hr').width((p+1) * (100/visibleMenuSections.length) + '%');
}
}
Here is a working jsfiddle:
http://codepen.io/anon/pen/PGOYmA
Note - you had a problem in your html - the values of the data-menuanchor in the menu should be the exact values of the data-anchor of the section.
Here is an updated version of the jsfiddle (with a bit of css changes):
http://codepen.io/anon/pen/WGXZaG
<div class="wrapper">
<nav class="main-menu">
<div class="main-menu-placeholder">
<div class="main-menu-wrapper">
<ul class="top-main-menu load-responsive" rel="Main Menu">
<li>ANASAYFA</li>
<li>İÇİNDEKİLER</li>
<li>EDİTÖR</li>
</ul>
</div>
</div>
</nav>
</div>
Here is my codes what i asking about. i have tried everything to make it centered but i cant do it. is there any solution ?
DEMO
Here is a solution that centers it both vertically and horizontally, as you didn't mention how... The basic idea behind it is to place a div with position:relative into one positioned absolute
.wrapper {
position:absolute;
width:100%;
vertical-align:center;
line-height:70px;
height:70px;
background:black;
}
.main-menu {
position:relative;
width:70%;
background:#FE4C03;
line-height:35px;
margin: 0 auto;
}
li,ul{
list-style-type:none;
display:inline;
margin:0 0;
}
this might be a simple enough solution for you:
<div class="main-menu-wrapper">
.main-menu-wrapper {
display:table;
margin:0 auto 0 auto;
}
Im trying to do a simple layout with css and html, the layout consist of a menu on the left and some boxes on the right side, the idea is that the left side will alway be a menu. How can I fix that the content never get under the menu ? or how can I exapand the menu
FIDDLE Demo http://jsfiddle.net/56JdE/
CSS
#wrapper
{
margin:0 auto;
width:960px;
height:auto;
}
#leftNav
{
height:500px;
width:200px;
background:#F00;
float:left;
margin-right:10px;
}
#div1
{
height:200px;
width:250px;
float:left;
background:#000;
margin-right:10px;
}
#div2
{
height:300px;
width:400px;
background:#00C;
float:left;
margin-right:10px;
}
#div3
{
height:200px;
width:250px;
float:left;
background:#00C;
margin-right:10px;
}
#div4
{
height:200px;
width:400px;
float:left;
background:#000;
margin-right:10px;
}
HTML
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<div id="div4">
</div>
</div>
From the look of your FIDDLE, I believe the question is why is my div under the menu?
This is because you have two div4's.
I amended your FIDDLE Demo which fixed the issue.
<div id="div4">
</div>
<div id="div4"> -Remove this!
</div> -And this!
Having two div4's caused the total width to exceed your wrapper width making the float:leftproperty move the div to under your menu.
You can just wrap the div's in another div, and make the margin 210px to left so that is never goes underneath the menu.
#contentRight{
margin-left:210px;
}
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="contentRight">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div class="div4"></div>
<div class="div4"></div>
</div>
See a working example here: http://jsfiddle.net/mtruty/HQ6WJ/3/
Also, ID's should correspond to a single element within the DOM. You should change that second div4 to div5, or make those div's classes. (e.g. class="div4"). I bet you were just adding that extra div4 to show how the box overflowed, but none the less, it is good to always make sure your markup is valid.
Just add a wrapper around content, and set the apropriate width's so they match the parent wrapper.
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="content_wrapper">
...
</div>
See fiddle:
http://jsfiddle.net/56JdE/2/
There's two simple ways you could do this. Either add some padding to the wrapper, maybe 20% to the left or whatever the width of the menu would be, and then absolutely position that menu to the left.
OR
You could create a parent container for your content, within the wrapper, and float both the menu ( first ) and the new container to fill up the wrapper accordingly. If you go the float method you'd have to add a clear somewhere after the content to keep the wrapper from collapsing, or float it as well.
.wrapper {
margin:0 auto;
}
.menu {
height:500px;
width:20%;
float: left;
background: red;
}
.content {
width: 80%;
float: left;
}
Full example # http://jsfiddle.net/M58C6/2/
i want to Design Menu bar as shown below, i have created whole list in ul but how to set different height ,width for center .Please help i tried code below but middle part is not increasing,
<nav id="Edit_panel">
<ul>
<li class="menubar" title="redo">
<div id="link">redo</div>
</li>
<li class="menubar" title="undo">
<div id="link">undo</div>
</li>
<li class="menubar" title="cut">
<div id="link">Cut</div>
</li>
<li class="menubar" title="copy">
<div id="link">Copy</div>
</li>
<li class="menubar" title="paste">
<div id="link">paste</div>
</li>
<li class="menubar" title="select">
<div id="link">select</div>
</li>
<li class="menubar" title="hand">
<div id="link">hand</div>
</li>
<li class="menubar" title="zoomin">
<div id="link">zoomin</div>
</li>
<li class="menubar" title="zoomout">
<div id="link">zoomout</div>
</li>
<li class="menubar" title="addimage">
<div id="link">Add img</div>
</li>
</ul>
</nav>
css:
#Edit_panel {
background-color: gray;
height:25px;
display: inline;
}
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Just add another class to elements You want to increase and set diferent height.
And remove duplicated ids.
First of all, you cannot have multiple elements with the same id, so you should change all
id = "link"
to
class = "link"
or delete those id's
Another mistake is putting height to the ul in css. The 30px height of ul means, that you want the whole list to be 30px high. You want to define the height for li elements, not the whole ul.
Instead of:
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Should be:
ul
{
background-color: #D8D8D8;
}
li {
height:30px;
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
If you want some elements to have different height or width, you can add some class to them, and define height for the class, for example:
<li class="menubar higher" title="paste">
<div id="link">paste</div>
</li>
And then in CSS you add:
.higher {
height: 50px;
}
Then your elements will be 30px high, and elements witch also have "higher" class, will he higher than others;]
you can give different heights to your elements by jquery. Use this demo for it.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.test
{
height:25px;
}
</style>
<script>
$(document).ready(function(e) {
$("li").eq(5).addClass("test"); // In 'eq' 5 is a index of li element and it starts from 0 to n-1
});
</script>
So basically, I have a tab bar where you have an add button to clone tabs and later edit them. My problem is that once so many tabs are added, my (left and right arrows) and my add button are removed. How can I add tabs, but keep my buttons from disappearing? Fixed position is not an option, I want the buttons next to the newest tab, and once the bar reaches a max-width, the buttons stay there. the arrows are to scroll through the tabs to see one's that will be hidden on overflow. http://jsfiddle.net/pHraC/1/
html
<div class="tabBox" style='max-width:800px'>
<ul class="tabs">
<li class="selected">Certificate of Quantity</li>
<li>COQ - Products/Chemicals</li>
<li>Movement Summary</li>
<li>Barge Survey</li>
<ul class="tabButtons">
<li><-</li>
<li>-></li>
<li><div class="tabNavAdd" title="Add another report form to nomination" style="margin-top:6px">
<input type='button' value='add' class='addTab' /></div></li>
</ul>
</ul>
</div>
jquery
// add new tab
$("input.addTab").live("click", function (event) {
var ultab = $(this).closest('.tabs'); // cache ul.tabs
var li = ultab.children('li:not(.selected)').first(); // cache the row
ultab.children('li:last').after(li.clone().find('a').attr("href", "#").text('New Tab').end());
});
First of all, I would suggest you seperate the .tabButtons form the .tabs
<div class="tabBox" style='max-width:800px'>
<ul class="tabs">
<li class="selected">Certificate of Quantity
</li>
<li>COQ - Products/Chemicals
</li>
<li>Movement Summary
</li>
<li>Barge Survey
</li>
</ul>
<ul class="tabButtons">
<li> <-
</li>
<li>->
</li>
<li>
<div class="tabNavAdd" title="Add another report form to nomination" style="margin-top:6px">
<input type='button' value='add' class='addTab' />
</div>
</li>
</ul>
then, use position:absolute to put them where you like:
.tabBox { position:relative;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 50px 0 0;}
.tabButtons {
position:absolute;
top:0px;
right:10px;
z-index:2;
}
You'll also have to define a position other than static to .tabBox for this to work and add some padding for the add button.
Finally, style the .tabs li like this:
.tabBox .tabs li {
display: inline-block;
list-style: none;
margin: 9px 0 0 0;
padding: 3px 1px 0;
height: 36px;
overflow: hidden;
position: relative;
z-index: 1;
}
and add white-space:nowrap; and display:inline-block; to the .tabBox .tabs
here's the result: http://jsfiddle.net/pavloschris/pHraC/4/
most simple way is to offset the top level <ul> with a padding and put the buttons as position absolute.
Here's a quick demo.
http://jsfiddle.net/ionko22/vURkK/
Oh and probably it's better to put your child <ul> within an <li>.