html - css block Width/Height - javascript

I have the following CSS code:
#nav {}
#nav a {
position: relative;
display: inline-block;
color: #F0F0F0;
width: 1em;
height: 2em;
line-height: 0.9em;
}
#nav a.icon:before { padding-right: 0;}
<nav id="nav">
<span>Home</span>
</nav>
But if the text is longer than 10 characters, it is automatically making a paragraph, making the text out of the original box. How can I prevent this?
Edit
All i want the background box in the screenshot to get bigger in width as the text is longer
http://prntscr.com/2cd973

if your aim is to display it all on the same line, you just need to remove width:1em; from #nav a
if you want to hide the text that is overflowing add overflow:hidden; to #nav a
if you want the a tag to adapt height and width to its content remove width:1em; and height:2em; from #nav a

You can display your content as a table-row. Then your links will be displayed as new columns in a table.
#nav {
display: table-row;
}
You can see the results on this fiddle.

Add this in #nav :
word-wrap:break-word;

Related

bootstrap "mega-dropdown" centering main menu nav items

I am trying to build a main menu navigation with a full width screen drop downs below it. I found an awesome example to build off of, but I cannot seem to figure out how center the main menu items themselves.
Here is what I have so far, See example here : http://codepen.io/ajmajma/pen/ALJbdk .
This works perfectly, however I need those main menu items (home, about, etc..) to be centered.
My first thought was to inline-block them, however this causes some screwy behaviour with the sub menu.
IF I add
.desktop-nav {
text-align: center
}
.menu {
display: inline-block
}
I get the desired centered effect, however the sub menu is confined the the small center size of the ul, and I need it to remain the full width of the page. See behavior here - http://codepen.io/ajmajma/pen/wzYPQm .
Any idea of how to fix this to get desired effect? Thanks!
You could add a text-align:center to the ul and add a display:inline-block to the li. Just remove the float:left from the li and you're good.
.menu > ul {
margin: 0 auto;
width: 100%;
list-style: none;
padding: 0;
position: relative;
box-sizing: border-box;
text-align:center;
}
.menu > ul > li {
display: inline-block;
padding: 5px;
margin: 0;
}
http://codepen.io/Founded1898/pen/amREJm
I have found the solution to this:
.desktop-nav {
margin-left: 50%;
}
.menu > ul > li > ul {
margin-left: -50%;
}
If you don't want to set the margin in the desktop, you have to create a something like .iWantThisMenuToCenter {margin-left: 50%}and assign it to the <nav> tag.

Hover state does not work when applying z-index

The problem is I have 2 divs: one container a link and another a box shaped container. The link has a position:fixed; and it flies over the container div, so I tried to give the link a z-index with a negative value, turns out the
hover state does not work when applying z-index with a negative value for the anchor Unless I scroll the same amount of the height of the container div. So I scroll like 3 times and the hover state works again.
HTML
<div id="div-1">
<div class="container"></div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
This is a link
</div>
CSS
#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:0;
}
#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
}
an important thing is:
The container is hidden by Jquery, unless I click a certain button.
$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});
I have resorted to every possible (other ideas) I could think of. I tried to do the opposite meaning giving the container a z-index positive vales and leave the anchor, but that leaves the same problem
update
I will try to change the css property "z-index"but only when the the container button is toggled on
so the link will have z-index:-9; but only when the container is toggled to be viewed and when it is toggled back off the z-index will be removed or not applied.
I can't really figure how this will be written with jquery I tried this
$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
$("#div-2 a").css("z-index", -9);
var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});
this only result when I toggled the container on the z-index will be applied, but when i toggle it of it remains, how to remove the z-index or make it equal to z-inedx:99; when the container is toggled off?
Only any other answer for the problem is appreciated.
It's not clear what you want exactly, but the pics helped, although it appears that you want the link above the container, it looks as if you don't?
the whole purpose is to make the anchor in a lower index, so when the container is toggled on/ viewed, the link won't be setting on top of the container.
But you want the link to always react when hovered upon. So I assume that you can't figure out why it's not hovering when the container is open and you can still see the link, so logically you'd expect to at least be able to hover over the visible portion of the link.
It's not jQuery and it's not the .container. It's the .container's container A.K.A. #div-1. #div-1 width is always 100% and even if you didn't have that style, it would be 100% still because that's what blocks have if there isn't an explicit width assigned to it.
Solution: Give #div-1 a smaller width.
You have a fixed link yet no coords. You can't expect a fixed element to stand it's ground and behave like a fixed element if it doesn't know where to stand. Also if you have any positioned elements and you want interaction between other elements, make those elements positioned as well, div-1 is now position:relative and the z-index properties of the link and div-1 function correctly now.
Solution: Give #div-2 a top and left or right and bottom properties. Give #div-1 a position property so that the z-index functions properly.
All details are commented in the source.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
}
#div-1 {
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
position: relative;
z-index: 1;
border: 1px solid red;
width: 200px;
/*Enable this and it will block link*/
/*width:100%;*/
height: 290px;
}
.container {
/* This saves you an unnecessary step in jQuery */
display: none;
width: 200px;
height: 290px;
background: orange;
}
#div-2 a {
width: 13%;
height: auto;
padding: 0.5em 2.3em;
display: block;
position: fixed;
font-weight: 500;
font-size: 1.09em;
text-align: center;
background-color: none;
text-decoration: none;
outline: none;
/* It's not clear whether you want the link above or
| below the container. If above, simply change to
| z-index: 2
*/
z-index: 0;
/* If you have a fixed element give it coords, otherwise
| it doesn't know where it should stand and behavior
| will be unexpected.
*/
top: 10%;
left: 125px;
}
#div-2 a:hover {
background: red;
color: white;
}
/* FLAG is just to test the accessibility of the link */
#FLAG {
display: none;
}
#FLAG:target {
display: block;
font-size: 48px;
color: red;
}
</style>
</head>
<body>
<button id='button-f'>F</button>
<div id="div-1">
<div class="container">Container is open</div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
This is a link
<span id='FLAG'>This link is accessible now!</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
/* This is the jQuery you need to accomplish what you want.
| The rest was redundant and unnecessary.
*/
$(document).ready(function() {
$("#button-f").click(function(e) {
$(".container").toggle();
});
});
</script>
</body>
</html>
Have you tried assigning a z-index to #div-2?
You'll need to assign it a position to be able to give it a z-index. Try this:
#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:2;
}
#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
position: relative;
z-index:1;
}
I don't know what actually in your code but the js you provide look at the if section you have (##button-f) so we find an error here and do we actually need this line ??like we also don't need the line 'container'.hide() in JS. Now you have to scroll for the 'a' certain height because yous set height for #div-1 which is not hidden. So that's amount of height you have to scroll.
So What I change on your code
1. cut the height of div-1 and place it to .container class. you dont provide the a:hover class so I add that to and remove some unnecessary css you have. If you have any other Question ask me in comment LIVE ON FIDDLE
$(document).ready(function() {
$("#button-f").click(function() {
$(".container").toggle();
});
});
button {
width: 13%;
height: auto;
}
#div-1{
width:100%;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
}
.container {
height:290px;
display:none;
border: 1px solid red;
}
#div-2 a {
width: 13%;
height: auto;
padding: 0.5em 2.3em;
display: block;
positon:fixed;
float:right;
font-weight: 500;
font-size: 1.09em;
text-align: center;
text-decoration: none;
border-radius: 10px;
}
#div-2 a:hover {
background: black;
color: white;
}
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
<button id="button-f">
button
</button>
<div id="div-1">
<div class="container">tagasdgasdgasdgas</div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
<a href='#'>This is a link</a>
</div>
</body>

Adding icon using css :before

I'm using superfish menu for the WordPress. I want to add some margin between the menu parent item and its dropdown and want to add an icon on the top of the drop down, so that it looks like following image:
The menu markup is automatically generated by the WordPress so it cannot be changed. I'm trying following CSS but it does not seem to work:
ul > li ul.subs{
margin-top: 10px;
}
ul > li ul.subs:before{
content: " ";
display: block;
height: 10px;
width: 20px;
position: absolute;
top: 0;
background: url('http://i.imgur.com/NL4Rq2S.png') no-repeat center bottom;
}
Problems:
When I hover, the sub menu disappears
The arrow icon does not appear.
Demo:
http://jsfiddle.net/y9Rk9/
The solution for the problem 2 is change the :before position to relative
The solution for the problem 1 is to make the menu height higher
ul > li ul.subs{
padding-top: 10px;
}
ul > li ul.subs::before{
content: " ";
display: block;
height: 10px;
width: 20px;
position: relative;
top: 0;
background: url('http://i.imgur.com/NL4Rq2S.png') no-repeat center bottom;
}
http://jsfiddle.net/y9Rk9/11/
Use ul > li ul.subs {padding-top: 10px;} instead margin-top: 10px;
A fiddle.

How to get a tree in HTML using pure CSS

I am trying to follow this tutorial and here's my code so far.
The end of the tutorial shows that the last nodes in a branch won't have any vertical bars after it. But I couldn't get it working that way!. Any ideas if I am doing something wrong, or maybe the tutorial is missing something!
I tried even the :last-child pseudo class as shown in the tutorial, but got the same result.
Here's a try using only pseudo-elements and borders:
ul, li{
position: relative;
}
/* chop off overflowing lines */
ul{
overflow: hidden;
}
li::before, li::after{
content: '';
position: absolute;
left: 0;
}
/* horizontal line on inner list items */
li::before{
border-top: 1px solid #333;
top: 10px;
width: 10px;
height: 0;
}
/* vertical line on list items */
li::after{
border-left: 1px solid #333;
height: 100%;
width: 0px;
top: -10px;
}
/* lower line on list items from the first level
because they don't have parents */
.tree > li::after{
top: 10px;
}
/* hide line from the last of the first level list items */
.tree > li:last-child::after{
display:none;
}
demo (edited)
Sadly, the pseudo-class is defined in the upcoming CSS3 specification and at the moment few web browsers support it.
It's written at the end of the tutorial. Maybe that's the reason it's not working.
I believe I've fixed it: https://github.com/gurjeet/CSSTree/pull/1
I modified the CSS to remove the background and changed margin to padding.
ul.tree, ul.tree ul {
list-style-type: none;
margin:0;
padding:0;
}
ul.tree ul {
padding-left: 1em;
background: url(vline.png) repeat-y;
}
ul.tree li {
margin:0;
padding: 0 1.2em;
line-height: 20px;
background: url(node.png) no-repeat;
color: #369;
font-weight: bold;
}
/* The #fff color background is to hide the previous background image*/
ul.tree li.last {
background: #fff url(lastnode.png) no-repeat;
}
ul.tree ul:last-child {
background: none;
}
Thank you guys, helpful answers which made me read some more, and finally I read this article and removed all dependency on JavaScript, and used the nth-last-of-type pseudo-selector to apply the special background to the last li items in a list (ignoring the ul that comes after the last li).
The final code is here. I am going to accept my own answer, unless someone points out some problem with it. (I don't think compatibility with older browsers matters to me at this stage.)
Thanks to #Aram for the answer. #OneTrickPony, your answer went over the head of this noob :) I am sure it does the right thing, but it's a bit too complicated for me.
<style type="text/css">
/* ul[class=tree] and every ul under it loses all alignment, and bullet
* style.
*/
ul.tree, ul.tree ul {
list-style-type: none;
margin:0;
padding:0;
}
/* Every ul under ul[class=tree] gets an indent of 1em, and a background
* image (vertical line) applied to all nodes under it (repeat-y)
*/
ul.tree ul {
padding-left: 1em;
background: url(vline.png) repeat-y;
}
/* ... except the last ul child in every ul; so no vertical lines for
* the children of the last ul
*/
ul.tree ul:last-child {
background: none;
}
/* Every li under ul[class=tree]
* - gets styling to make it bold and blue, and indented.
* - gets a background image (tilted T), to denote that its a node
* - sets height to match the height of background image
*/
ul.tree li {
margin:0;
padding: 0 1.2em;
background: url(node.png) no-repeat;
line-height: 20px;
color: #369;
font-weight: bold;
}
/* The last li gets a different background image to denote it as the
* end of branch
*/
ul.tree li:nth-last-of-type(1) {
background: url(lastnode.png) no-repeat;
}

Entire drop-down menu quickly flashes upon page load

I have a standard drop-down menu that uses jQuery to hide the children li elements. However, upon loading the site, the child elements quickly appear and subsequently disappear (sort of like a quick flash). I don't think this is at all related to the flash-of-unstyled-content known issue.
The site is in Hebrew, but that shouldn't affect anything. The site is located here
If you'd like a sample HTML + CSS and the Javascript code, I would gladly post it here.
I was just wondering if anyone has encountered this issue before. I'm seeing it in Chrome, and I haven't really checked if it also happens in IE and Firefox.
Thanks!
EDIT: HTML/CSS/JS shown below:
HTML:
<ul class="menu">
<li>blah
<ul class="sub-menu">
<li>blah</li>
</ul>
</li>
</ul>
CSS:
/* NAVIGATION -- level 1 */
ul.menu { float: right; list-style-type: none; font-size: 15px; margin-top: 50px; }
ul.menu > li{ float: right; display: inline; position: relative; margin-left: 30px; }
ul.menu li > a { display: block; color: #5c5d5f; text-decoration: none; border-bottom: solid 1px #9b9a95; }
ul.menu li:hover > a, ul.menu li a:hover , ul.menu li.current_page_item > a { color: black; }
body.home .current_page_item > a { }
body.home .current_page_item > a:hover { }
/* NAVIGATION -- level 2 */
ul.menu li > div { display: none; width: 157px; height: 171px; margin-right: -10px; position: absolute; opacity:0; background: url(images/subNav_bg.png) no-repeat top right; }
ul.menu li > div span { height: 15px; background: transparent; display: block; } /* used to push down the menu */
JS:
// navigation menu //
// add hasSubMenu to each li that has one //
$('.menu > li').has('ul').addClass('hasSubMenu');
// wrap with <div> //
$('li.hasSubMenu > ul').wrap('<div />');
$('ul.menu li > div').css('display', 'none');
$('ul.menu li > div').prepend('<span></span>');
$('li.hasSubMenu > a').click(function () {
return false;
});
// add class to <div> for extendedBg //
$('li.extendedBg').find('div').addClass('subBg2');
$('li.hasSubMenu').hover(function () {
// hover on
$(this).addClass('hover').find('div').stop().fadeTo("medium", 1, /* when done fading */
function () {
$(this).find('div').css('display', 'block');
//$(this).find('ul').css('display','block');
}
);
}, function () {
// hover off
$(this).removeClass('hover').find('div').stop().fadeOut();
});
Set the dropdown menu as display: none in the page's CSS or directly in the element itself using style="display:none". This will hide it as the page loads.
I have the same issue :( except when i used the css to hide it on load, i now have the problem that it never displays! even when hovering over the parent...
Even before i posted my reply i thought id try one more thing
#navigation ul ul{
display:none;
}
instead of
#navigation ul ul li{
display:none;
}
and now it works perfectly
I recommend setting the style to display:none the the li elements in a style sheet, so that the browser knows to render them initially as not displayed. Then, when jQuery loads, the inline style that jQuery adds will override the display style.
ul li {
display:none;
}
Try:
.mobile-menu:not( .mm-menu ) {
display: none;
}
where '.mobile-menu' is whatever class or ID you have given to the containing element of your menu.
e.g
<div class="mobile-menu">
<ul>
<li>about</li>
<li>Food</li>
</ul>
</div>

Categories