Ive created a panel using HTML and CSS only. I want this panel to be on the bottom div of the screen and when you tap the image (that I used to replace the default text) the panel rises from the bottom. I've got that down for the most part, however, as I am rather new to panels I can't figure out how to use the same image to close the panel as well.
I'm not against using javascript or jQuery, but im just learning those two, so my skills are not quite as good as all of yours!
Here is my HTML and my CSS
<nav id="nav" role="navigation">
<ul>
<li>
<a class="findMe" href="#" aria-haspopup="true"><img
src="assets/whiteGearIcon.png" /></a>
<ul>
<li ><a href="#"><img class="theDudeAbides"
src="assets/tools/timerIcon.png" /></a></li>
<li><a href="#"><img class="obviouslyYoureNotAGolfer"
src="assets/tools/flashIcon.png" /></a></li>
</ul>
</li>
</ul>
</nav>
nav
{
/* container */
}
#nav > a
{
display: none;
}
#nav li
{
position: relative;
}
/* first level */
#nav > ul
{
height: 3.75em;
}
#nav > ul > li
{
width: 25%;
height: 100%;
float: left;
}
/* second level */
#nav li ul
{
display: none;
padding: 0;
float: right !important;
position: relative;
background-color: grey;
width: 65%;
height: 35%;
}
#nav li:hover ul
{
display: block;
}
.findMe img{
position: absolute;
left: 300%;
top: 50%;
width: 45%;
}
Thank you for your time.
Related
.mid {
display: block;
width: 60%;
margin: auto auto;
}
.navbar {
display: inline-block;
position: absolute;
}
.navbar li {
display: inline-block;
font-size: 140%;
}
<div class="mid">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Feedback</li>
<li>Support</li>
</ul>
</div>
I want to go to the Services pages with the navbar locked on top. If the bar is fixed on top then called page should cover the rest of the screen.
you can try:
.navbar {
top: 0;
position: fixed;
width:100%;
}
this should hold the nav bar at the top of the page.
I'm working on the navigation bar for a website and currently the main menu is complete. However, the "Services" and "Products" buttons need to each have their own sub-menu. The sub-menu should normally be hidden from view and appears when the user mouse-overs on the respective button.
Here is a fiddle with the desired result. Obviously, I'd rather not use any javascript if possible.
The idea I had initially was to have sub-menu have position: absolute with a z-index value lower than that of the main-menu, so that it can slide underneath the main-menu. However, doing so messes up with the width if I give it width: 100% and since my site is responsive, I avoid static widths.
I also tried doing with relative positioning, but that doesn't work either.
Another thing I don't like with that approach is that the markup for the main menu and sub-menu get split. Is it possible to get the above result, but with this markup?
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services
<ul>
<li role="presentation">Link 1
<li role="presentation">Link 2
</ul>
</li>
<li role="presentation">Products
<ul>
<li role="presentation">Link 3
<li role="presentation">Link 4
</ul>
</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
Here is my code:
CSS
body {
font-size: 0;
}
.bodyframe {
display: inline-block;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}
.div_container {
max-width: 1460px;
width: 100%;
display: inline-block;
margin: 0 auto;
}
header {
width: 100%;
height: 49px;
}
.nav {
display: block;
position: relative;
list-style: none;
background: #304770;
z-index: 10;
}
.nav li {
display: inline-block;
background-color: #304770;
margin: 0 5px;
}
.nav li a {
padding: 12px 15px;
font-size: 18px;
color: #EFEFEF;
display: block;
}
.nav li.active a {
color: orange;
}
.nav li.active a:before {
width: 100%;
}
.nav li a:hover {
background-color: #304770;
color: orange;
transition: color 0.25s;
}
.nav li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background-color: orange;
-webkit-transition: width 0.2s;
transition: width 0.2s;
}
.nav li:nth-last-of-type(1) a:after {
display: none;
}
.nav li a:hover:before {
width: 100%;
}
.nav li a:after {
content: "";
display: block;
position: absolute;
right: -8px;
top: 21px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
.subnav {
list-style-type: none;
display: block;
position: relative;
top: -49px;
margin: 0;
z-index: 1;
background-color: #ccc;
-webkit-transition: top 0.2s;
}
.subnav li {
display: inline-block;
background-color: #ccc;
margin: 0 5px;
}
.subnav li a {
padding: 8px 10px;
font-size: 14px;
color: #EFEFEF;
display: block;
}
HTML
<div class="bodyframe div_container">
<header>
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services</li>
<li role="presentation">Products</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
<ul class="subnav">
<li>Test</li>
<li>1243</li>
</ul>
</header>
</div>
If you only need the submenu to mimic the one in the example, without using jQuery, using the second chunk of HTML with the CSS you supplied you could do:
nav:hover~ul {
top: 0px;
}
This shows the next ul element, in this case the subnav, whenever the nav is hovered over ("~" selector means select the ul element preceded by nav:hover).
However, if you want to do something more dynamic... id suggest just using JS/jQuery as well
I have designed a Navbar in which the drop down are absolutely positioned with respect to their parent list items (Main menu list is position: relative and submenus position: absolute).
My navbar 's main list is long (stretches till right-end of page). So when I hover on the last main menu item, then my drop-down occupies it's width and the page introduces a horizontal scroll (goes outside the body content).
I want the dropdown's on extreme ends of the page to open from right to left so that they lie within the body itself and no scroll is introduced.
How can I achieve this??? Please Help.
I have designed a Navigation Bar as follows:
HTML:
<ul id="menu">
<li>Home</li>
<li>
Categories
<ul>
<li>CSS</li>
<li>Graphic design</li>
<li>Development tools</li>
<li>Web design</li>
</ul>
</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
CSS:
#menu li {
float: left;
border-right: 1px solid black;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu ul {
position: absolute;
top: 38px;
left: 0;
margin: 20px 0 0 0;
opacity: 0;
visibility: hidden;
transition: all .2s ease-in-out;
}
#menu ul ul {
top: 0;
left: 195px;
margin: 0 0 0 20px;
}
#menu ul a {
padding: 10px;
width: 175px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu li:last-child ul {
left: auto;
right: 0;
}
I have a dropdown in menu. But it drops not the way I need.
but I need it to be aligned as a menu item. like in here:
could it be done simply with css?
html
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Account<b class="caret" style="float: right;"></b></a>
<ul class="dropdown-menu">
<li>Account Info</li>
<li>Billing Settings</li>
<li><a href="{% url 'dev_logout' %}" >Sign out</a></li>
</ul>
</li>
css:
.dropdown-menu {
background-color: black;
min-width: 100px;
width: 160px;
}
.dropdown-menu > li {
align: center;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: #cfeffd;
background-color: #333333;
background-image: none;
filter: none;
}
.dropdown-toggle {
min-width: 100px;
width: 125px;
}
.caret {
marging-left: 30px;
}
You can make it by setting position:relative to ".dropdown" and position: absolute to ".dropdown-menu" and his width to 100%.
li {
padding: 10px 20px;
}
.dropdown {
position: relative;
display: block;
background-color: #ff0;
width: 120px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
background-color: gray;
}
Here is a working example :
http://jsfiddle.net/5CB4Q/3/
Assign the DropDownList a CssClass like DDLStyle.
select.DDLStyle{text-align:middle;}
This works in most modern browsers, but not in IE.
I have this layout
I have 2 problems:
The height of div 2 is not same as div 1 or 3, i tried this solution
from stack overflow, but its not working.
The menu to be set in div 2 is responsive, but on shrinking the width, it
list down, which pushes the carousel even below, screwing the whole
design..... is there any method i can make the mid_div responsive
by not shrinking but instead create a horizontal scroll in that div
only (depending on screen size) ??
CSS
#h_scroll {
margin: 0 auto;
margin-top: 10px;
width: 80%;
}
#h_scroll_banner {
display: inline-block;
width: 100%;
}
#h_scroll .fltlft {
float: left
}
#h_scroll .fltryt {
float: right
}
#h_scroll .mid_div {
width: 100%;
background-color: #F11181;
height: 100%;
}
#h_scroll .mid_div ul {
list-style: none;
display: inline-block;
margin: 0 auto;
}
#h_scroll .mid_div li {
list-style: none;
display: inline-block;
}
#h_scroll .mid_div li a {
display: block;
line-height: 20%;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding: 4%;
width: 20%;
}
HTML
<div id="h_scroll">
<div id="h_scroll_banner">
<div class="fltlft" id="div_height_to_get">
<img src="image/scroll_banner_left.jpg" style="width:100%; height:auto" id="div_height_to_get" />
</div>
<div class="fltryt">
<img src="image/scroll_banner_right.jpg" style="width:100%; height:auto" />
</div>
<div class="mid_div" id="div_height_to_set">
<ul>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
</ul>
</div>
</div>
If you have full control over the source, here is my solution (JSFiddle preview):
HTML
<div class="wrapper">
<div class="banner-left"></div>
<div class="banner-mid">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="banner-right"></div>
<p>This is some content under the menu</p>
</div>
CSS
.wrapper {
margin: 40px auto;
width: 600px;
}
.banner-left, .banner-right {
background: #eee;
float:left;
height: 50px;
width: 50px;
}
.banner-left {
margin-left: -50px;
}
.banner-right{
margin-right: -50px;
}
.banner-mid {
float:left;
margin-bottom: 20px;
width: 100%;
}
.banner-mid > ul {
background: #ddd;
list-style:none;
margin: 0;
padding: 0;
height: 50px;
width: 100%;
}
.banner-mid > ul > li {
float:left;
line-height: 50px;
padding-left: 10px;
}
Since your banner flairs don't have any content in them, why not use a ::before and ::after? I don't see the need why all 3 divs need to be the same height and using generated content you can just have the slideshow positioned based on margins from .mid_div.
.mid_div {
position: relative;
}
.mid_div::before, .mid_div::after {
display:block
width: 50px; /* image width */
height: 50px; /* image height */
content: '';
position: absolute;
top: 0;
left: -50px;
background: url(image/scroll_banner_left.jpg);
}
.mid_div::after {
left: 100%;
background: url(image/scroll_banner_right.jpg);
}
As for you wanting a scrollbar, use overflow-x: auto on the .mid_div and for the .mid_div ul have a set pixel width for it and whenever .mid_div gets smaller the content won't reflow. You could also try white-space: nowrap on the ul also while having the li {display: inline}.
The answer to your first question, making all the divs the same height, you need to do this:
div1, div2, div3 { display: table-cell; }
For your second answer you could apply a min width to the divs/div and set the overflow to scroll.