prevent dropdown menu from expanding off-page - html

I am trying to create a responsive dropdown menu with icons and text in full mode and icons only when windows are small (for the top level). For the second level, I still want to show the names in the sub menu.
Full code On codepen:
https://codepen.io/-royqooe/pen/QWmXEKw
See the last element of the menu with sliders
My html :
<li><i class="fas fa-home"></i><span class="topbar-text">Home</span></li>
<label for="btn-1" class="show_nav"><i class="fas fa-sliders"></i><span class="nav_parent topbar-text">Admin</span></label>
<a><i class="fas fa-sliders"></i><span class="nav_parent topbar-text">Admin</span></a>
<input type="checkbox" id="btn-1">
<ul class="navbar_dropdown">
<li><i class="fas fa-users"></i><span class="subbar-text">Manage users</span></li>
<li><i class="fas fa-list"></i><span class="subbar-text">manage</span></li>
<li><i class="fas fa-users"></i><span class="subbar-text">browse files</span></li>
</ul>
</li>'
My responsive css
#media screen and (min-width: 630px) and (max-width: 1080px) {
.topbar-text {
display: none;
}
.subbar-text {
font-size: 12px;
}
nav ul ul li{
position: relative;
margin: 0px;
left: 0px;
width: 150px;
line-height: 0px;
float: left;
}
}
The problem is probably around width: 150px; thing is if I remove it, the submenu will become so small, condensed, and ugly and have text divided into 3 lines but won't break out of the page.
If I add a fixed width text shows inside as I want but it breaks out on the right side...
Also, in the responsive part, if you move the mouse to the submenu directly it disappears, moving the mouse in "L" shape pattern, down to the empty area under the menu, and then to the left to the submenu works because of the padding I added. So I would appreciate if someone explains how to fix that too...
Can someone help to make the submenu still maintain a good width to show all text but restricted to the window? if needed the menu should expand to the left, instead of right outside the page
EDIT:
With somdow's answer, it improves thing for the full mode, but the second mode still has an issue (the L shape thing but reverse this time) see the following gif:

IF i understand you correctly, then all I did was, go to
nav ul ul, and add
right: 0px;
and that's it. Now obviously you can play with the numbers but this should work and your menu wont hide off page any more.
like this(I took this from your code on codepen)
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid cyan;
opacity: 0;
visibility: hidden;
transition: top .1s;
right:0px;
}
Add the last line and you are done.
came out like this:
happy coding

Related

Aligning text using CSS in a <ul> <li>

Here is my CSS:
ul.list-ok {
list-style: none;
margin: 0;
}
ul.list-ok li {
margin-bottom: 8px;
height: 18px;
line-height: 18px;
}
.fa-angle-right:before {
content: "\f105";
}
Here is my HTML:
<ul class="list-ok" style="margin-top: 25px !important;display:inline-block;">
<li style="height: initial;"><i class="fa fa-angle-right"></i>Streamlined processes saving you time and money. This is a very long bullet point that needs to wrap and wrap and wrap so that a very long paragraph lines up properly.</li>
<li style="height: initial;"><i class="fa fa-angle-right"></i>A+ rated with the BBB</li>
</ul>
Here is my output:
Here is my fiddle.
Here is my issue ;)
I would like the the word 'and' to wrap properly and line up with the start of the other text, I was able to achieve that with using other list-styles but the client wants to use this method. I have searched google and tried a number of different techniques to align the text and also tried enclosing my text in <p> and other elements in an effort to achieve my desired output. I am at a loss and seem to be getting further away from the answer the more tutorials I follow and links I find on google. Any help is appreciated.
EDIT:
I have used the attribute display:inline-block; but it cuts the text off on a mobile device so this is not an option, i need the text to wrap properly. In an effort to make the question more simple I cut out several bullet points that are quite long
This is what I would like the finished product to look like, but using my custom bullet point created by the fa-angle-right class:
Try white-space:nowrap Fiddle
ul.list-ok {
list-style: none;
margin: 0;
}
ul.list-ok li {
margin-bottom: 8px;
height: 18px;
line-height: 18px;
white-space:nowrap;
}
.fa-angle-right:before {
content: "\f105";
}
<ul class="list-ok" style="margin-top: 25px !important;display:inline-block;">
<li style="height: initial;"><i class="fa fa-angle-right"></i>Streamlined processes saving you time and money</li>
<li style="height: initial;"><i class="fa fa-angle-right"></i>A+ rated with the BBB</li>
</ul>
Wrap the li text in '<\span><\/span>' tag and style it with as per your need.
try to fix the min-width of the <\span><\/span> so that it will not distorted in smaller screens.

Add image to Bootstrap Navbar Links

I want to add a small avatar next to a link in my bootstrap navbar like this:
I am trying to add my image inside the <a> tags of the link, but this is pushing the link out of line with the other links, because the image is taller than the text of the links.
Here is my HTML
<li><a href="link">
<img class="hidden-xs" src="img">
MIKE
</a>
</li>
Is there a proper way to easily add images to bootstrap nav-bars so that all the links still remain in line?
Here's #press' fiddle with the line height changed. You can obviously tweek around padding etc.. to your likes http://jsfiddle.net/c6f1ecrv/4/
.navbar-nav li a {
line-height:3em;
padding:5px 10px;
}
Thanks to those of you who pointed out that I need to change line height. The problem with just changing line height, however, was that this would mess up the default height setting of the bootstrap nav bar. So I made some calculations with less to make all the styles play nicely.:
#nav-avatar-height: 40px;
#nav-link-line-height: #nav-avatar-height;
#nav-link-padding-vertical: calc((#navbar-height - #nav-avatar-height) / 2);
// Only apply extra spacing when not collapsed into dropdown
#media (min-width: #screen-xs-max) {
.nav > li > a {
font-size: 1.1em;
line-height: #nav-link-line-height;
padding-top: #nav-link-padding-vertical;
padding-bottom: #nav-link-padding-vertical;
}
.nav > li > a > img {
height: #nav-avatar-height;
border-radius: 50%;
border: 1px solid #gray-light;
}
}

Navigation bar stretched to cover screen

Right now I am fairly happy with my navigation bar and it is centered how I would like it, however instead of the white background box ending at the end of the specified width, It is running the full length of the screen, as seen at www.rebeccahenrydesign.com/about.html
Does anyone know what I can to to give it a specified length.
Here is my html
<script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li>Home</li>
<li>Work
<ul>
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" >Contact</a>
</li>
and here is the css
.horizontalcssmenu ul{
padding: 0;
list-style-type: none;
background:white;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline-block;
float: none;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 120px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px white;
border-left-width: 0;
text-decoration: none;
background: white;
color: #f77bb1;
font: 20px Helvetica,sans-serif;
}
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px white;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}
/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}
/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: white;
border-width: 0 1px 1px 1px;
}
.horizontalcssmenu ul li a:hover{
background: #f77bb1;
color:white;
}
.horizontalcssmenu ul li ul li a:hover{
background: #f77bb1;
}
.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */
Please forgive me if the formatting of this post is incorrect (or if this is a stupid question). I have never coded anything before this and I have never posted on this site! Any feedback is appreciated. Thanks
Editing my answer as i look at the actual website... Also, you have some other errors that need to be corrected. Run your web page through this web site and correct the errors it indicates.
You have defined the class four times with the same name. This will not work. If you need to define four classes, they must all have different names.
http://validator.w3.org/
-----------Update-------
Okay, I fixed your problem. Here is the code, with my changes made as comments that you can delete. You should still run it through the validator, and fix problems.
The problem you asked about required setting a width and a margin in the div element. There are other things you should address, but this solves your main problem.
<!DOCTYPE html>
<html>
<head>
<!-- Declared character encoding --> <meta charset="utf-8">
<!-- Inserted required title element --> <title>About Rebecca Henry</title>
<!-- Moved link element from body to head --><link rel="stylesheet" type="text/css" href="csshorizontalmenu.css">
<!-- Moved Script to the head element --><script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
</head>
<body>
<h1>About Rebecca Henry</h1>
<!-- Added a width and a margin. This solves your white bar problem. --><div class="horizontalcssmenu" style="width: 556px; margin: auto">
<ul id="cssmenu1">
<li>Home</li>
<li>Work<span class="arrowdiv"> </span>
<ul style="top: 27px;">
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li>About</li>
<li>Contact
</li>
</ul>
</div>
<!--Split the menu from the table with separate div elements -->
<div>
<br>
<br>
<br>
<img src="images/profile.jpg" alt="Profile">
<!-- changed align center to margin auto inline style --><br><table style="width:410px; margin: auto">
<tbody><tr>
<td>
<p>
Hello Friends,
<br>
My name is Rebecca Henry and I am a Graphic
Designer out of Richmond Virginia. I love
working with different mediums, but print is
by far my favorite. Experimentation
and trial and <br> error are important factors in my work. I
try to think out of the box and try as many
things as I possibly can. The work on this site
is comprised mostly of work from my junior year
of college at Virginia Commonwealth University,
and also of the work I completed at an internship
with a local luxary car service by the name of
bioRide. I am passionate about useing my talent to help others in any way I can. My dream job would be to work with a non-profit creating meaningful work. I do not work in hopes of fame or foutune, but simply for the love of what I do. If you have any questions or comments
about the work, I am always happy to hear them.
My contact information can be found on the contact
page. I am currently a student, and always looking
for employment so please feel free to contact me
in those regards also. Thank you for visiting my page!
</p>
</td>
</tr>
</tbody></table>
<br>
<br>
<br>
<br>
<br>
</div></body></html>
Welcome aboard!
I wish you to find all the help you need on this great Q&A platform.
The "local" solution
This solution only resizes the list container. The advantage is that you can choose the width you want without impacting the rest of your page. The drawback is that whenever you add an element to your page, you have to align/size it manually.
Add this in your CSS file:
ul#cssmenu1 {
width: 580px; /* Edit this line */
margin: 0 auto;
}
The "global" solution
This solution resizes the entire page by resizing the body, which is the first displayed child element of the <html> element. The drawback is that you cannot expand your list container outside the body element (well, at least not without a hack or side effects). The advantage is that you have a consistent layout in your entire page, no matter what you add or edit in the future. Also, you can resize the entire page (if it's too small, or if you want to have a responsive version, ...) by updating just one value. That's definitely the direction I would take.
Start by resizing the entire body by adding this at the top of your CSS:
body {
width: 580px; /* Edit this line */
margin: 0 auto;
}
Now, in your HTML page, line 48, replace:
<table style="width:410px" align="center">
with the following:
<table>
Of course, I am not saying there are no other solutions, but that these two ones are the first ones that come to my mind.
Also, as Edward said in his answer, please use W3C's markup validator as using standard markup gives you - among other things - a better chance to be compliant with all sort of browsers. Results for the page you gave can be found here. Your CSS is also invalid, you can check it with the CSS validator.

How to create a resizable horizontal navigation menu?

Question: What's the best way to create a horizontal menu with drop down capabilities that can be dynamically resized? (Or preferably, how can I edit my current menu to behave like that?)
Explanation: I'm using a thin, horizontal drop-down menu as the main navigation on my site. When the browser window is at full width, there are no problems, but when it is resized, the right-most link pushes down to the next line, as it is floated.
Horizontal menus are such a common thing, I know there have to be some common tricks and ways to create them so that they can be dynamically resized. So if trying to fix my current menu is too burdensome, I would be fine just to hear some tips or read some stuff on how to create better horizontal menus.
Here is what I think would be the main problem:
.menu2 li {
position: relative;
float: left;
width: 150px;
z-index: 1000
}
I've tried different combinations of making this inline and making other tweeks, such as making the 150px width into a percentage, but that would create all sorts of alignment issues with the text.
Here is a demo with all of the code now: http://jsfiddle.net/HSVdg/1/
Some notes on the above link:
I am using Tiny Drop Down 2 (http://sandbox.scriptiny.com/tinydropdown2/) for drop-down functionality (in the form of JS and CSS, which are noted in comments), though the drop down is not actually working in the jsfiddle. I'm pretty sure all of the JS is irrelevant to my main question.
Tiny Drop Down uses a lot of CSS, so it's been quite difficult for me to try and make little tweeks.
The buttons are not vertically lined up with the actual bar, but again this is not the main issue since this is not happening on my actual site.
The window size in the jsfiddle doesn't actually accomodate the entire length of buttons, so you immediately see the problem of the buttons moving to the next line.
Try my version, with display table/table-cell:
http://jsfiddle.net/HSVdg/10/
I've basically just replaced floats with display: table on .menu2 and display: table-cell on its children (li's)
This is how i see it
<nav>
<ul>
<li id="youarehere">Home
<li><a>Products</a>
<li><a>Services</a>
<li><a>Contact Us</a>
</ul>
</nav>
ul#navigation {
float: left;
margin: 0;
padding: 0;
width: 100%;
background-color: #039;
}
ul#navigation li { display: inline; }
ul#navigation li a {
text-decoration: none;
padding: .25em 1em;
border-bottom: solid 1px #39f;
border-top: solid 1px #39f;
border-right: solid 1px #39f;
}
a:link, a:visited { color: #fff; }
ul#navigation li a:hover {
background-color: #fff;
color: #000;
}
ul#navigation li#youarehere a { background-color: #09f; }

UL - LI Bullets as Image an right side next to the text

i have some problems with styling an UL as navigation bar (sorry for this question, but iam a developer, not designer..)
The Problem occours in Safari on Mac (FF is working fine) See first picture (FF)
Css:
.multiPoint {
list-style-image:url(../images/punkte.jpg); }
.directionRight{
direction:rtl;
padding-right:3em;
margin-right:0.5em;
}
#navigation {
text-align: left;
}
HTML:
<div id="navigation" class="span-6 directionRight">
<ul>
<li class="multiPoint">Sie</li>
</ul>
</div>
If the bullet image is directional (like in the example above), the rtl approach may have the unintended side-effect that the image is mirrored in some browsers, resulting in an arrow pointing from right to left instead of left to right.
A background image does not show this behavior in IE9 and it maintains the correct orientation.
list-style: none;
background: url(images/bullet.gif) no-repeat center right;
padding-right: 10px;
Try updating your multiPoint class style as follows:
.multiPoint {
list-style-image:url(../images/punkte.jpg);
list-style-position: inside;
}
That will tell the browser to position your bullet images inside the list instead of outside.