I am trying to create this layout in CSS3
The image on top-left should collapse the vertical menu and show only the images. This should be animated, so it smoothly collapses. I want to do a CSS only solution, no JS/JQuery, no Bootstrap if at all possible. When collapses, the green and yellow boxes should move left as well. Both blue and green boxes should be fixed and the yellow one scrollable.
This has some potential features I want. This is not exactly what I want, and it does not work in my browser.
I am not sure how I can make, with CSS only, the top-left image link to resize the vertical menu, hide only the text of the links (which is not under a span, since I dislike to use it for presentation only), and change its own image. Of course, by clicking again on the new top-right image it should "de-collapse".
One problem I have is that I used padding for the green and yellow boxes as this Website does, and this seems incorrect to me. They should automatically be readapted to the new layout, without having to toggle the padding.
I have created a JSfiddle.
<body>
<header>
<nav>
<a href="#">
<img src="logo.png" alt="logo">
</a>
<ul>
<li><img src="option1.jpg">Option 1</li>
<li><img src="option2.jpg">Option 2</li>
<li><img src="option3.jpg">Option 3</li>
</ul>
</nav>
</header>
<main>
<nav>
<ul>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</nav>
<h1>Main title</h1>
TEXT TEXT TEXT
</main>
</body>
Any help is appreciated.
EDIT:
Browser support - I would like to address mainly modern browsers, so I will not care much about old IE tricks.
It seems that it is not possible to do it with only CSS (I kind of felt that from my old CSS experience, but was not sure if recent improvements had gone so far to allow it). If JS/JQuery is required, I guess the solution is to capture the click on the image and change the DOM. Not sure how the animation can be done though. And what about the basic layout? Is there a way to keep green&yellow on the left side, close to the blue box, without padding them differently depending on collapse?
The most common way to achieve a toggle without JS is using the checkbox hack. Here is a simple example to get you started (clicking menu will toggle the list style):
.main_nav__checkbox {
position: absolute;
top: -1000em;
}
.main_nav__checkbox:checked ~ ul {
background: red;
}
<nav>
<input type="checkbox" name="togglenav" id="togglenav" class="main_nav__checkbox" aria-label="Toggle Menu" />
<label class="main_nav__toggle" for="togglenav">Menu</label>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</nav>
Note that there are reasons that this isn't used often:
It is 'hacky'
It relies on the :checked attribute ( IE9+ )
It relies on the label checking the checkbox ( a firefox bug made this difficult in the past)
ya, as mentioned in above answer i've edited your fiddle made it work with that 'hacky' checkbox :checked css selector. but i'm unable to animate it though
try modifying the fiddle or i'll update the answer if i can get the animation to work!!!
FIDDLE
Related
I am trying to produce a Navbar similar to the one on this page :
http://wrapbootstrap.com/preview/WB0375140
I am using Bootstrap 3 and can create the top corner rounded boxes with slight gradient at bottom easy enough.
The thing I am struggling with is that the menu items in the navbar on that example are all the same width regardless of how wide the text in them is.
I am scratching my head trying to find out how that is done - And ideas much appreciated.
You have to add css width property to all elements in the navbar.
Assuming your navbar is something like this:
<div id="myCustomNavbar">
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
You should add some style with CSS:
#myCustomNavbar > ul > li
{
width: 100px !important;
}
Remember you can always right-click the element you are interested in (in the sample webpage), and click Inspect element. There you can see all html markup and CSS styles applicated to that element
I'm trying to make my current CSS navigation responsive for mobile devices.
I currently have it set up with a media query so that when the screen width falls below the specified size it changes to block form (stacked) and a menu icon appears on the right hand side of the logo (to later be made into a button).
The problem I'm currently having is that the drop down menu which is used for my second link in the navigation, is causing a gap to appear between the second and third link (as if the drop down content is taking up the space whilst hidden).
I've tried looking for solutions but can't seem to find the right answer for my particular setup. Basically, the link "How It Works" should sit right beneath "Sections" when on mobile.
http://jsfiddle.net/fc45c7p5/
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:330px;height:100px"/>
</a>
<div id="menu-icon"></div>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME</li>
<li>SECTIONS
<ul>
<li>RETAIL</li>
<li>HOTEL</li>
<li>RESTAURANT</li>
<li>SHOPPING</li>
</ul>
<li>HOW IT WORKS</li>
<li>OUR EXPERIENCE</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>CONTACT US</li>
</ul>
</div>
Don't take too much note of the media query max-width of 1008px, I'm aware this isn't standard mobile size, it's just temporary whilst I get it working first.
Any help regarding this is really appreciated.
visibility keeps your elements there without displaying them. You should use display:none when you do not want show the space the hidden element takes. Use display:block to show them again. Add some CSS transitions to the height of the a elements to make the reveal somewhat smoother.
Here : http://jsfiddle.net/6eshy7n2/
Add the following.
ul.navbar ul li { float: none; width: 100%; display:none;}
ul.navbar li:hover > ul li{display: block;}
You have to make the lis inside the uls actually not display when the parent li is not being hovered. When it is hovered you then change the display value to block to make it visible.
I have this list
<nav>
<ul>
<li>list el</li>
<li>list el</li>
<li>list el
<ul>
<li>inside</li>
<li>inside2</li>
</ul>
</li>
</ul>
</nav>
<section>
<img src="#">
<h1>Some Title</h1>
</section
And I am using :focus to display the dropdown list on click, without using JS. Everything is ok for now. But I would like to,change the color of the entire section when the dropdown list is active (through :focus).
Is there any way I could do that entirely with css? I am trying to use as little JS as possible (definetly no jQuery)
Yes you can, without the slightest bit of JS, using the Radio Hack. Basically, use a label as your "focused" element. This label should have its for attribute refer to an input type="radio" that is hierarchically above the elements that you want affected. Then just use the following css selector #myradio:checked ~ #mysection{ }.
More details here: https://stackoverflow.com/a/21939282/2306481
If you are open to changing from using :focus to using :target then yes you can.
It is not clear from your question how you are implementing your drop-down behaviour, but this is a simple example, that should explain how you can approach it. (only the third item has a drop down, but all three links should change the background colour).
The behaviour of :target is a little different to :focus however, so things that you need to be aware of are:
target will change the URL, creating a history point.
target will retain the "focus" even if the user clicks on a different element, the only time a target is lost is when another target is targeted.
li ul {display: none;}
#dd1:target { background: gold; }
#dd2:target { background: green; }
#dd3:target { background: red; }
#dd3:target .dd3 {display: block;}
<div id="dd1">
<div id="dd2">
<div id="dd3">
<nav>
<ul>
<li>list el</li>
<li>list el</li>
<li>list el
<ul class="dd3">
<li>inside</li>
<li>inside2</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
Here is the jsfiddle for it http://jsfiddle.net/8PcxE/
<div id="container">
<div id="header">
<div id="nav-container">
<ul id ="nav-list">
<li id=nav-title>lymbo</li>
<li>Playmaps</li>
<li>Map</li>
<li>About</li>
<li>My Account</li>
<li>Log Out</li>
</ul>
</div>
</div>
It is fine on a wider page, but when I run it on a small page everything is cramped and the options get pushed together making a zipper-like pattern.
My other problem is when I type something in my headers or paragraphs it will be at the top and intersecting with my navigation bar making it look like a mess.
My goal is to make a sort of "gradient" looking navigation bar hence the shadows. But that also doesn't seem to look right. If someone can give me some input on that, it would be much appreciated.
I found that after I changed my nav-container CSS to position: relative from position: fixed it works out. Are there any negative effects of doing this?
Since you've changed all the <li> to inline, the simplest solution would be to prevent wrapping on the <ul>:
#nav-list {
white-space: nowrap;
/* ... */
}
http://jsfiddle.net/mblase75/Lt72p/
Can anybody give a reference or is it possible to create a menu entirely depending on
CSS and not a single bit of javascript?
The Requirement is a dropdown menu, which can have many children ( submenu ).
Will anything if created like this will be cross browser compatible?
Any help on this topic will be appreciated!.
EDIT
Thanks for all your inputs one more doubt
Can this be implemented rather than using ul li
say div span combination as that may help me achieving a menu which won't change my current html structure!
The trick is the :hover pseudo-class.
<ul class="menu">
<li>
Menu Item 1
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li>
Menu Item 2
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
Ok? So your entire submenu has to go inside the <li> of the main menu item it corresponds to. Then for the CSS:
.submenu { display: none; }
.menu>li:hover>.submenu { display: block; }
Do a bit of styling, and job done.
Edit: For another layer of menus, it's really simple. Use this CSS:
.menu li>ul { display: none; }
.menu li:hover>ul { display: block; }
Note that I've replaced .menu>li:hover with .menu li:hover. That tells the browser to find all li elements below the main menu (not just immediate descendants) and show their submenu when hovering. I've also got rid of using the submenu class because it's not really needed if you're basing the CSS on descendants. This will let you add as many levels as you want.
Check this site : http://www.cssplay.co.uk/menus/ which have a lot of different menus with CSS only. A reference.
Check this out: http://www.cssplay.co.uk/menus/final_drop.html
See if this helps http://www.howtocreate.co.uk/tutorials/testMenu.html
http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129
It is certainly possible to do drop-down menus in CSS only, and many sites are now using it.
What you won't get (yet) with CSS are any animated roll-outs, etc - the menu will just toggle between visible and hidden. If you want animated roll-outs, jQuery may be a better option. That said, CSS animation does exist. It is only implemented in one or two browsers, but you could add it to your stylesheet anyway; it won't break browsers that don't support it; they just won't get the animation.
Cross-browser compatibility for CSS menus is relatively easy, as long as you ignore IE6. IE7/8 can be made to work without too much fuss, but IE6 is badly broken for virtually all CSS-only menu techniques. If at all possible, try to avoid having to support IE6. Its an old browser, and really needs to be left to die in peace.
Others have already provided links to some good examples, so I won't repeat them here.
I have just finished developing a CSS Menu for mobile devices, using absolutely ZERO Javascript. Basically, by applying the tabindex="-1" attribute to anything you want, you allow that element to react to the :focus CSS property without actually being part of the tab order (so you can't reach that element by tabbing through). Applying this to the currently accepted solution:
<ul class="menu">
<li tabindex="-1">
Menu Item 1
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li tabindex="-1">
Menu Item 2
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
I removed the <a> tags (because now our drop-menus are CLICKABLE, we insert the tabindex on whatever we want to click on and the CSS gets changed to this:
.menu > li:not(:focus) > .submenu { display: none; }
Check out this Codepen for my Mobile Menu:
NO javascript
Responsive
Stylable
HTML Hamburger menu symbol!