Navigation menus design - css

I want to design a navigation menu something like:
<ul id="menu">
<li><a>link1</a>
<ul class="subMenu">
<li><a>sublink1</a></li>
<li><a>sublink1</a></li>
</ul>
</li>
<li><a>link2</a></li>
<li><a>link3</a></li>
<li><a>link4</a></li>
</ul>
From css point of view how is better to write your code:
hide dropdown list with position:absolute; left:-999em; and on hoover top:0; left:0;
or
display:none; and display:block; on hoover?

Using display instead of positioning is more correct as it actually hides the element instead of just moving it outside the page.
Besides, this also saves you 3 lines of code.

If you want to hide it then why not to use display:none; and display:block;? Any reason why you considering moving them instead?

Related

How to revert nav menu to unordered list view when resizing window?

I've been assigned to design a nav menu using CSS.
I've designed it accordingly, but I didn't find help regarding how to revert the menu back to its unordered list view when the browser window becomes too small to fit the menu.
I can't use scripting, only pure CSS.
Any suggestions?
The HTML code is as following:
<nav class="line">
<ul>
<li>Home</li>
<li>Articles
<ul>
<li>Things</li>
<li>Stuff</li>
<li>Subjects
<ul>
<li>Serious subjects</li>
<li>Frivolous subjects</li>
</ul>
</li>
</ul>
</li>
<li>Solving homework
<ul>
<li>Not here</li>
<li>Not here either</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</nav>
What you are trying to do is a responsive page. That is also called the 'mobile first grid system' because you make it fit the small screen first, then you only add new elements to the classes in media queries as you move to bigger screens.
This should get you started:
http://css-tricks.com/resolution-specific-stylesheets/
http://css-tricks.com/css-media-queries/
And just google around the subject of 'media queries' and 'responsive web page' and you should find all the info you need.
Good luck!
Try to use media queries.
For example:#media (max-width:400px)
{
ul li ul
{
display:none;
}
}
You can use media queries for this.

Custom bullet list is not displaying well

I am trying to create custom bullet listing but it doesn't display well to what I expected.
The problem is it is too close as shown in the link HERE
Suggestion will be appreciated.
Thanks
You can play with :after and :before selectors.
My suggestion it would be to go with something like this:
ul{list-style:none;}
li{padding-left:15px; position:relative;}
li:before{content:" "; position:absolute; left:0; height:10px; width:10px; background:url(path/img);}
You should probably try to specify a line-height for the <li>'s.
Like:
<ul class="custom-list">
<li>some item</li>
<li>some other item</li>
</ul>
And the css:
.custom-list li {
line-height: 20px;
}
Check jsfiddle here change the line-height and click run to see the effect...
You might also need to tweak the position of your custom bullet images, but as I said on my comment, you should provide some code example or better yet a jsfiddle to be able to help you any further...

making a floating div with css and anything in it

i wanna make a floating menu kind of like facebook with css with no animation just straight up attached to the top all the time, i have this div
<div id="topmenu">
<ul class="topmenu_buttons">
<li class="home">Home</li>
<li class="Change_Location">loaction</li>
<li class="Help_Topmenu">help</li>
</ul>
</div>
and i have my css file already made but empty but i would like a quick explanation on how to arrange these three links in css as a list with a small normal font in a list fashion one on top of the other all inside a black div the links located to the left but a few pixels to the right from the left and also
if its possible to apply the floating css effect (((postion:fixed ))))on the div so it applies to everything on it, if not possible then how to apply it also for the links
also how to make it look like kind of like facebook but black and slighter bigger thicker i been trying with my css notes but it never works for me i dont know what im doing wrong
thank you i basically want the css code for a external file not inline style
That should do everything you want to do:
#topmenu{
position:fixed;
top:0;
background:#000;
width:100%;
height:50px;
}
#menu {
postion:fixed;
top:0;
background:#3B5998; same color as fb has
width:100%;
height:46px;
left:0;
z-index:2; //give this so, your header or menu will not get under content!
}

CSS Absolute positioning not working

Hi,
Attached screenchot is mockup of our application where in their are -n- number of widgets which are freely movable all through the screen. Everything else works fine except minimize widget functionality. PFA screen shot for the actual problem which comes up after clicking settings button (start of arrow in screen shot). The problem that we are facing is with the positioning of minimize block. We need to achieve it just below the setting button, but it is coming out of widget area.
Please find below code snippet and detail for the same.
The Minimize functionality is being formatted using the JQUERY file with forming the HTML using UL-LI
The CSS for the UL is done using below code snippet.
ul. editModule
{
Display:none;
z-index:200;
position:absolute;
left:177px;
top:3px;
padding-top:2px;
clear:left;
}
The minimize box in the screen shot is being made using below code snippet:-
<ul class=”editModule”><li class=”editColor”><ul class=”moduleColor”><li class=”module-colorWheel”></li><li class=”moduleChoice-blue” title=”module-blue”></li><li class=”moduleChoice-green” title=”module-green” ></li><li class=”moduleChoice-red” title=”module-red” ></li><li class=”moduleChoice-yellow” title=”module-yellow” ></li></ul></li>
<li class=”applyAll”><a href=”#” class=”closeModule”>Close Widget</a></li>
<li class=”minimize”><a href=”#” class=”minimizeModule”>Minimize Widget</a></li>
</ul></li></ul>
When I click on the settings button(start of arrow) it opens the minimize functional box for the widget in a wrong location. Ideally the position should be just below the Settings icon in the hearder i.e. Top right corner.
Any sort of help regarding this will be great. if any further input is required do post comments.
So the problem is that the pop-out div is showing up in the wrong location?
Please try to give the parent container of the pop-out element a CSS style of position:relative.
position:absolute works on the whole screen, unless the parent container of the absolute positioned element also has positioning set.
Erik
EDIT: I have made you some HTMl where the editModule is placed absolute relative to the titlebar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style>
ul li {text-decoration:none; float:left;}
.titlebar {
background-color:green;
height:20px;
position:relative;
}
.editModule
{
position: absolute;
right: 0px;
top: 20px;
border:1px solid red;
float:right;
padding-top:2px;
}
</style>
</head>
<body>
<div class="titlebar">
<ul class="editModule">
<li class="editColor">
<ul class="moduleColor">
<li class="module-colorWheel">CW</li>
<li class="moduleChoice-blue" title="module-blue">BLUE</li>
<li class="moduleChoice-green" title="module-green" >GREEN</li>
<li class="moduleChoice-red" title="module-red" >RED</li>
<li class="moduleChoice-yellow" title="module-yellow" >YEL</li>
</ul>
</li>
<li class="applyAll">Close Widget</li>
<li class="minimize">Minimize Widget</li>
</ul>
</div>
<!-- </li></ul> -->
</body>
</html>
Try removing the clear: left; command. Clear together with position: absolute doesn't really make sense.

create a 4x3 grid of css panels

I am trying to find a CSS tutorial that would enable me to create a 4x3 grid of features like on this site http://www.ewedding.com/features.php
If anybody can suggest one it would be great! All the tutorials that I have found seem to style the entire page rather that a particular part of the page.
Thanks in advance
Decbrad
the page you link uses an UL as outer element and an LI as inner element so you have this:
<ul>
<li>Feature1.1</li>
<li>Feature1.2</li>
<li>Feature1.3</li>
</ul>
<ul>
<li>Feature2.1</li>
<li>Feature2.2</li>
<li>Feature2.3</li>
</ul>
<ul>
<li>Feature3.1</li>
<li>Feature3.2</li>
<li>Feature3.3</li>
</ul>
use a CSS definition like this:
ul{
float:left;
width: //specify the width
display:block;
}
li{
list-style: none;
display:block;
}
etc.
That said, I think a CSS table layout is better for this:
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

Resources