Simplest menu using CSS

Many web designers I met had problems while  creating menus, specially which contains nested sub menus.

In some cases it is a real pain, but in most of cases it is simple, and the problem come when the designer start to implement the simple menu the hard wrong way, it will take ages from him to implement a simple menu while it just need few lines of css code.

Also he may think it can’t be done without javascript and jquery.

Try to think simple while writing your next menu and may be you will need my code as a starting point for a more complex menu.

What I am listing here is a very simple menu, putting in mind that this menu may contain infinite number of submenus.

Lets start with html:

<ul>
        <li>Main 1 >
            <ul>
                <li>Sub 1 >></li>
                <li>Sub 2 >>
                    <ul>
                        <li>Sub SUB 1</li>
                        <li>Sub SUB 2</li>
                        <li>Sub SUB 3</li>
                    </ul>
                </li>
                <li>Sub 3</li>
            </ul>
        </li>
        <li>Main 2 >
            <ul>
                <li>Sub 1</li>
                <li>Sub 2</li>
                <li>Sub 3</li>
            </ul>
        </li>
        <li>Main 3 ></li>
        <li>Main 4 ></li>
    </ul>

 

 

This html use UL and LI to draw the menu html, you can use divs instead of UL and LI, this will not cause a problem.

The only hint I can point about the previous html code is that the sub menus html are inside the parent menu html.

Such as ‘Sub 1 >>’ is inside the parent ‘Main 1’, this will make our job easier.

Next CSS:

 ul li ul li
{
clear: both;
}

li
{
list-style-type: none;
float: left;
margin: 0 10px;
cursor: pointer;
width:100px;
}

li ul
{
display: none;
padding: 0;
}

li:hover &gt; ul
{
display: block;
}

The most important lines for us are starting from line 15, everything before this is just for making things looks better and formatted better.

As you see it is just 4 lines of code to make the menu functional, the trick exists in line 21, which will show the UL which exists under any LI and the user hovered on it, and the ‘>’ means that we will show just the first level of UL not all nested UL.

Feel free to add more nested submenus and see how simple it is.

Demo

it’s weekend, facebook shoooooooo

I am not using facebook that much, I just open it for few moments everyday to check my friends news, But rarely I put a status or upload a picture there.

The question I have is: why employees get angry when their companies decide to block facebook during working hours?

By the way I don’t respect a company which do this, this is the last last step after many discussions with their employees.

 

After monitoring facebook, and my friends activities during all week days, I can say that: the number of posts on facebook get 95% down in weekends, get 50% down after working hours, and really the peak time for facebook is during the working hours. “all numbers are estimated and just based on my own experience

In my point of view, the employer pay us salaries to get from us work, for example he pays us 100$ per week to work 40 hours per week, 8 hours per day, so our salary = 40 hours work including a rest hour per day.

So if you take all this time daily on facebook or chatting, do you think you deserve this salary? “if the answer yes: sorry this post came to you by mistake discard it ;)

 

Other notes:

I know many workers I worked with, facebook is a permanent browser tab, never close it.

I know others, just open facebook on weekends “may be something bad also for their families :D

Avoid sending Ajax request parameters in query string style

While reviewing some code, I found someone calling jQuery Ajax like this:

$.ajax({
       type: “POST”,
       url: “/AddPost”,
       data:  “postText=”+ PostText ,
       dataType: “json”,
       success: function (status) {

       }
}); //$.ajax({

And as you see in the previous code, it is sending the data using this line: data: “postText=”+ PostText ,

This is like a query string style, this will work well but image the user inserted a special char in PostText, such as ?? you will get on the server un expected value “”jQuery15107041011152323335_1309357585354″”

So never use this style while dealing with Ajax calls, you need to post it in JSON style like this:

$.ajax({
        type: “POST”,
        url: “/AddPost”,
        data: { postText: PostText },
        dataType: “json”,
        success: function (status) {

        }
}); //$.ajax({

This will work whatever char the user will insert.

Javascript based Data Grids

sigma_grid-ajax_editable_data_grid_22641

 

I found in this blog post some good javascript based grids http://www.queness.com/post/7300/7-robust-and-feature-packed-javascript-grid-plugins

 

Here are their links:

1- http://flexigrid.info/

2- http://www.webismymind.be/editablegrid/

3- http://www.trirand.com/blog/

4- http://tablesorter.com/docs/

5- http://www.datatables.net/

6- https://github.com/mleibman/SlickGrid/wiki

7- http://blog.jqueryui.com/2011/02/unleash-the-grid/

List of Colors in System.Drawing.Color

Few lines of code to print all System.Drawing.Color colors on a web page.

loop on System.Drawing.Color using KnownColor

Label lblColor;
Label lblColorName;
Panel pnlColorRow;
string[] colorNames = System.Enum.GetNames(typeof(KnownColor));
foreach (string colorName in colorNames)
{
pnlColorRow = new Panel();
Color color = Color.FromName(colorName);
lblColor = new Label();
lblColor.BackColor = color;
lblColor.Style.Add("display", "block");
lblColor.Style.Add("width", "50px");
lblColor.Style.Add("height", "50px");
lblColor.Style.Add("float", "left");
lblColorName = new Label();
lblColorName.Text = color.Name;
lblColorName.Style.Add("display", "block");
lblColorName.Style.Add("width", "50px");
lblColorName.Style.Add("height", "50px");
lblColorName.Style.Add("float", "left");
pnlColorRow.Height = 70;
pnlColorRow.Controls.Add(lblColor);
pnlColorRow.Controls.Add(lblColorName);
this.pnlColors.Controls.Add(pnlColorRow);
}

 

Demo

How to hide users files and folders on your website?

Sometimes you want to hide some files or folders on your website, so that no one can access them directly.

If you have an upload feature in your website, and your website users upload their files or images to your website, It will not be nice to let other users see others files by guessing the URL.

For example: Your website uploaded files directory is “UsersUploads” and you put there all the users files, so one file url will be www.example.com/UsersUploads/File1.pdf, another will be www.example.com/UsersUploads/File2.doc .

Now a user can guess the URL and access others files specially if your files names are easy to guess.

There are two solutions for doing that:

1- You can put your “UsersUploads” folder outside the website directory, so if your website exist on “c:\website\example.com” you can put the “UsersUploads” there “c:\UsersUploads”, Like that IIS has no control over this folder and its files, And your website code will still have access to this directory as a normal physical path.

2- Stop IIS from serving this folder:

IIS by default doesn’t server some website folders and files such App_Data, App_Code, bin, App_GlobalResourses, App_LocalResources, Web.config,….

You can configure IIS to stop serving some more files or folder inside your website folders by Adding a new Hidden Segment.

– Select your website in IIS, and open Request Filtering.

– Go to Hidden Segments tab.

– In the right Actions panel click on “Add Hidden Segment…”.

– Write there the file or folder name you want to hide.

– This will edit your website web.config file and add the following:

<system.webServer>
<security>
<requestFiltering>
<hiddenSegments>
<add segment="UsersUploads" />
hiddenSegments>
requestFiltering>
security>

iisConfig

Now users can’t access this folder directly by guessing the URL.

Note that you can do this manually without the IIS by editing your website web.config file and put there the same values.

 

I believe that there are more ways to accomplish the same thing, but these are 2 easy ways.