Scale content with size of menu - javascript

I was trying something out as a test but didn't quite know how to program it the right way. I was hoping someone could help me out with that.
I made a sketch so it would be a little more clear about what I want to achieve. The menu on the left needs to stay in that exact position.
Let's say the content next to the menu would be smaller than the menu itself. Then the green sections would go underneath the menu. This is not what I want to achieve. I was thinking about scaling the height of the content with Javascript if the content element is too small.
Do you feel like this is the right way to accomplish the desired result? Or could you suggest a better/cleaner way to accomplish this? (An example on jsfiddle would be great)
Thanks in advance!
Edit: I would also like to inform that the menu's height needs to be dynamic. For example what if I add an extra menu item.

You mean something like this?
Just be wary this Only works on MODERN browsers as I am using the checkbox hack :)
Here is a code snipet
*{
box-sizing:border-box;
margin:0px;
padding:0px;
}
#head{
background-color:#000;
border-bottom:#333 solid 1px;
display:block;
padding:10px 0px 0px 10px;
}
#head ul{
background-color:#f00;
display:block;
width:150px;
position:relative;
list-style:none;
margin:0px;
text-align:center;
}
#head li{
display:none;
}
#head input{
display:none;
}
#head input:checked ~ li{
display:block;
}
#head input:checked ~ label{
background-color:#511;
color:#fff;
}
#head label{
font-family:Constantia;
width:100%;
padding:10px 0px;
color:#333;
border-bottom:#111 dotted 1px;
display:block;
font-weight:bold;
text-transform:uppercase;
}
#head label:hover{
background-color:#511;
color:#fff;
cursor:pointer;
}
#head a:link{
background-color:#f00;
width:150px;
display:block;
color:#111;
text-decoration:none;
border-bottom:#333 solid 1px;
padding:10px;
float:left;
margin-right:10px;
}
#head a:visited{
color:#111;
}
#head a:hover{
background-color:#911;
color:#fff;
border-bottom:#211 solid 1px;
font-weight:bold;
}
#body{
padding:10px;
}
<div id="head">
<ul>
<input type="checkbox" id="menu" />
<label for="menu">Menu</label>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div id="body">
<h1>Content</h1>
<p> All my content sits here what am I suppose to do?</p>
</div>
By making use of floats rather than position absolute lets the browser know there is suppose to be content under the header if I had to change it to apply position absolute it would still go out the header but won't take up any space therfore the content wont shift next to or under it but rather behind the navigation.
You should see that the content will go below it when the window gets smaller if you wish to make the content not be squashed up a bit before going underneath the navigation is to set a min-width to the #body{} tag.

Related

Transparent Popup / Overlay with Buttons (JQuery, CSS)

I have a html website and I want to see on my mainpage a transparent overlay / popup with buttons like in the picture I uploaded. To press one of these buttons for redirection to particular url. How can I create this popup? It should be universal, therewith I don't need to change my html structure and also I can use it with different websites by just binding this JQuery/CSS.
My sketch:
I wrote up an example on ho wto accomplish this. You can use the rgba to add alpha (or transparency) into your colors.
$("body").append(`<div class="popup">
<ul>
<li>Ex 1</li>
<li>Ex 2</li>
<li>Ex 3</li>
<li>Ex 4</li>
</ul>
</div>`)
body {
margin:0;
padding:0;
}
.popup {
position:fixed;
top:0;
left:0;
z-index:1;
width:100%;
height:100%;
background:rgba(77,77,77,.4);
}
.popup > ul {
list-style-type:none;
padding:0;
margin:0;
position: absolute;
top: 50%;
width:100%;
transform: translateY(-50%);
}
.popup > ul > li {
background:green;
display:inline-block;
color:black;
border:2px solid black;
width:calc(25% - 8px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Menu "ul" overlaps submenu "ul" element on jQuery.animate() function

I want my submenu to have slide down effect using
$.animate({top:$("#menu").outerHeight()})
I want my submenu to have an effect as a car(submenu) leaving the garage(first level menu) on slide down, then car parking to the garage on a slide up. I do not want to have a $.slideDown() or $.slideUp() effects, because I do not like the effect of increasing height.
The problem is that I can not seem to make my first-level menu overlap my submenu on sliding down or sliding up. On hover submenu just overlaps the main menu and then stays "overlapped" on slide up.
Here is my HTML code:
<ul id="menu_Navigation2">
<li>First</li>
<li>Second
<ul>
<li>Default</li>
<li>Default</li>
</ul>
</li>
<li>Third</li>
<li>Forth
<ul>
<li>Forth default
</li>
<li>forth default
</li>
</ul>
</li>
</ul>
CSS:
#menu_Navigation {
border:1px solid green;
margin:0px;
padding:0px;
list-style-type:none;
}
#menu_Navigation li {
padding:4px 4px;
}
#menu_Navigation>li {
display:inline-block;
position:relative;
list-style-type:none;
z-index:90;
border:1px solid black;
background:linear-gradient(to bottom, #b5c7e4, #94b1dc);
color:white;
font-size:13px;
cursor:default;
margin-right:-4px;
min-width:100px;
}
#menu_Navigation a {
color:white;
text-decoration:none;
}
#menu_Navigation ul {
position:absolute;
display:none;
padding:0px;
min-width:106px;
margin-left:-4.5px;
list-style:none;
top:-27px;
z-index:-999;
}
#menu_Navigation ul li {
display:block;
border:1px solid black;
background:linear-gradient(to bottom, #b5c7e4, #94b1dc);
}
#menu_Navigation ul li:hover {
border:1px solid black;
background:linear-gradient(to bottom, #b5c7e4, #94b1dc);
color:blue;
}
To clarify, please have a look at this jsFiddle, which illustrates the problem.
How can I achive this animate effect, so submenu appears as a whole(gradually) from the main menu then slides up to menu properly(not overlapping it)?
Thanks in advance for any suggestions.
Remove the z-index from:
#menu_Navigation>li
And add it to:
#menu_Navigation
For this to work(parent above children) the parent(first level of li) needs to be wrapped(the main ul) with an element with positive z-index and the children(internal ul) needs to have negative z-index(you have that).
EDIT: As suggested by Shukhrat Raimov I am adding his jsFiddle with the working code.

What technique do I use to get text into each individual tab?

I have been stuck on this for ages, here is my code so far:
<html>
<head>
<script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
body, html, div, ul, li, a {
margin:0;
padding:0;
}
body {
font-family:arial;
font-size:12px;
color:#000000;
}
.clear {
clear:both;
}
ul {
list-style:none;
position:relative;
z-index:2;
top:1px;
display:table;
border-left:5px solid #808080;
}
ul li {
float:left;
}
ul li a {
background:#000000;
color:#000000;
display:block;
padding:6px 15px;
text-decoration:none;
border-right:100px solid #000000;
border-top:1px solid #000000;
border-right:3px solid #808080;
}
ul li a.selected {
border-bottom:1px solid #808080;
color:#000000;
background:#808080;
}
h1 {
display:block;
width:600px;
margin:0 auto;
padding:200px 0;
color:#000000;
}
#navigation {
width:602px;
margin: 0 auto;
}
#content {
width:600px;
margin:0 auto;
height:200px;
background:#ffffff;
border:1px solid #000000;
z-index:1;
text-align:center;
padding:10px 0;
}
#logo {
width:600px;
margin:0 auto;
padding:10px 0;
text-align:right;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><font color="white">Tab 1</li>
<li><font color="white">Tab 2</li>
<li><font color="white">Tab 3</li>
<li><font color="white">Tab 4</li>
<li><font color="white">Tab 5</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<p id="content_changer">You have selected Tab 1</p>
<p>See the page source for full code</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#navigation ul a').click(function() {
$('#navigation ul a').removeClass('selected');
$(this).addClass('selected');
$('#content_changer').html('You have selected ' + $(this).html());
});
});
</script>
</body>
</html>
I can not figure out how to get one of these tabs menu thing to work, I have tried so many different methods but nothing will work.
It's not very good code, but it works for me. The only problem is that the #content text is set to font color white, so you can't see it, though it is there.
You should avoid font tags, as they are badly out of date, as well as inline JS.
I tried running your code. I found that the text is written #content_changer element, but its white colored.
Here's how you can solve it.
Add the following css rule
#content_changer{
color:#000;
}
Change the $(this).html() to $(this).text().
That much should do.
The problem is not in your JS, but in your CSS. Font color is white on the links in the navigation, which means it will be invisible on the content area. Also, using is deprecated and you need to set content-area color to black.
Here is a working jsFiddle:
http://jsfiddle.net/8ftyy/
Differences are these:
#content_changer {
color: black;
}
ul li a {
color: white;
}
and no font-color in html.

Navigation bar/menu getting disappeared on smaller screen - CSS issue

I am in middle of developing a website and I am facing a small problem. The top navigation bar of the website works fine upto a particular screen resolution. However, if I adjust my browser window (smaller in size), the navigation bar is getting disappeared. The same problem also persist if I view the website on my Ipad. I am not able to figure out what am I doing wrong with the CSS code for navigation menu.
I have uploaded the website on a testing server
http://bcklight.hostoi.com/
HTML Code
<section id="start" class="start">
<div id="section-nav" class="section-nav">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Product&Services</li>
<li>Work</li>
<li>Company</li>
<li>Contact</li>
<li>Fi | En</li>
</ul>
</div>
</div>
CSS Code
.container{
margin:0 auto;
max-width:960px;
padding:0 5%;
width:90%
}
.section-nav{
background:#FFFFFF;
-webkit-box-shadow:0 0 5px #111;
-moz-box-shadow:0 0 5px #111;
box-shadow:0 0 5px #111;
color:#838383;
display:none;
font:800 .688em "proxima-nova",sans-serif;
letter-spacing:.3em;height:31px;line-height:31px;
position:absolute;
text-align:center;
text-transform:uppercase;
top:0;
width:100%;
z-index:9999
}
.section-nav.fixed{
position:fixed
}
.section-nav ul{
clear:both;
list-style:none;
margin:0;
padding:0
}
.section-nav li{
display:inline-block;
padding:0 3%
}
.section-nav li.active a{
color:#f7e442;
text-decoration:none
}
.section-nav a{
-webkit-transition:400ms;
-moz-transition:400ms;
-o-transition:400ms;
transition:400ms;
color:#838383;
font-weight:700;
outline:0;
text-decoration:none
}
.section-nav a.active,.section-nav a:hover{
color:#FF8C00;
text-decoration:none
}
.nav-trigger{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
background:yellow;
cursor:pointer;
display:none;
float:right;
height:16px;
margin-top:7px;
width:16px
}
.section-header{
font:800 1.875em "proxima-nova",sans-serif;
letter-spacing:10px;
margin:0 0 20%;
padding-left:10px;
text-align:center;
text-transform:uppercase
}
Please have a look at inspect element on the browser if I am missing anything to mention over here.
I don't understand what's the problem - you're using "display: none;" on both
media="screen, projection"
.section-nav
and then (when it get's even smaller):
media="screen, projection"
screen.css:2057#media only screen and (max-width: 768px)
.section-nav .nav { display: none; }
i think you've got messed up with all the media queries and lost track of what does what :) happens to me all the time. you just need to use Chrome Inspector to figure those out ;-)
http://someimage.com/nFKmzAA
Position fixed has very poor support on mobile browsers.
You should use a media query to change it from position fixed to position absolute on mobile browsers.
in screen.css, line 93
.section-nav{
display:none;}
display none makes this issue.

javascript drop down menu

Really love the drop down that I found on http://www.scriptiny.com/2008/04/sliding-javascript-dropdown-menu/
I have 4 Menus and when I add this this flows over the logo. The size of each menu is in fact too big. When I tried to alter this the size of sub-menus stay the same and it was looking ugly. I can't attach screenshot as SO doesnt allow me to.
I basically want the size of the menu box to be smaller;
CSS code is :
body {margin-left:140px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:right; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
I agree with Glenn. Can we have more detail of what you did/tried?
I tested with FireFox 4.01 and FireFox 5.0 with a float:right on the dropdown class and got the results I expected.
EDIT:
++ to Wesley's solution as it's cleaner to wrap outside the dropwdown class...
If you can't figure it out the way it is, put it in a div with float:right
<div class="nav-wrapper">
<!-- Your navigation markup -->
</div>
.nav-wrapper {
float:right;
}

Categories