RSS

Navigation Menu using CSS and JQuery – Step 1

Step 1 – Positioning the Navigation Menu

Ok so let’s assume we are starting from scratch and have a blank web page:

Blank Web Page Template

I am now going to extend my main.html page with 2 new Divs. These are ‘content’ and ‘top_menu_bar’

Content DIVs

 

I am also going to add the following styles to our style.css file for these 2 Divs:

Content DIVs styles

The border properties are not required but merely demonstrate where our Divs are sitting on the web page.  The Content Div will hold the page content, while the top_menu_bar Div is going to be the placeholder for our menu.  If you browse to main.html you will see something like this:

Using Borders to show the Positioning of the Content DIVs

Try resizing the browser menu.  Notice that the menu will remain positioned in the middle of the window as we are using auto margins.

The final stage of this step is to remove our temporary borders and apply a gradient background to our ‘top_menu_bar’ Div.  Go online and type gradient generator into Google.  There are lots out there but essentially you want to create a gradient that is 1 pixel wide and 60 pixels in height e.g.

Sample Gradient Image

Save the Gradient image to your site folder and revise the Style sheet as below:

Revised Content Style

Your page will now look like this:

Navigation Bar

 

 

 

 

 
 

Navigation Menu using CSS and JQuery – Step 2

Step 2 – Creating and Positioning the Top Level Menu Items

To our page, lets start by adding another DIV which will contain our navigation bar items and a List of menu Items:

Parent Menu Items

If you browse to the page now, before we have added any styles, you will see the following (not very stylish):

Un-Styled Menu Items

Therefore, lets modify the style sheet and add the following styles in order to position and style our top level menu items:

Top Level Menu Item Styles

There are a few styles worth noting here:

Firstly the * Style, shown towards the top, ensures that we reset any default positioning applied by the browser template.  If you have done much web development you will have noticed that pages display slighltly differently based on the browser you are using.  By adding this style I am ensuring the body content will always be posiiton flush with the top of the page.

I have also applied a z-index property to the navigationBar DIV to ensure that the menu and its drop down menus will display on top of any other page element.

I have added some text shadow to the menu items.  This is a newer CSS property and so will not be available in all browsers and will simply not be applied if the browser does not support Text Shadow.

I like to apply new effects and styles where possible but the golden rule is not too implement a style which will cause the element to look out of place if the style is not supported by the browser and so cannot be applied.

Ok great, so now if you browse to the page we should see our navigation bar taking shape:

Top Level Menu Items

 

 

Navigation Menu using CSS and JQuery – Step 3

Step 3 – Adding the Drop Down Menus

Lets begin by extending the unordered list <ul> tags within our page to include some child lists.  These will make up the items in the drop down menu;

Child Lists for the Drop Down menus

Notice that I have encapsulated the child lists wihin another DIV with an associated class of navigationBar_sub. This will make it easier to style the dropdown lists seperately from its parent.

So lets add the following styles for the drop down menus to our style sheet

Styles for the Drop Down Menus

Using the same approach as in Step 1, I created an image which was 1 pixel wide, black and semi-transparent.  This is set as the background image (see above) for any <ul> tags found within a DIV associated to the class navigationBar_sub.

Also notice that I have set the display property to Block.  This is only temporary as we only want to display the menu when the user hovers over the menu item and by setting the property to block the child menu will always be displayed.  This is handy though as we can check the styles are correct and you should end up with something like:

Navigation Bar showing child menus

 

Navigation Menu using CSS and JQuery – Step 4

Step 4 – Animating the Drop Down Menus using JQuery

Following on from styling out drop down menus in Step 3, the first thing we need to do is hide the child menus.  We had set them to always display so that it was possible to check the styles had been applied correctly.  However, by default it makes more sense to hide these drop down menus so that we can make use of JQuery to display the menus when the user hovers over a parent menu item.

Therefore, modify the .navigationBar_sub ul style as shown here:

Set the display property to ‘none’ to hide the element

Now all that is left to do is add the JQuery script to fade in and out the drop down menus when the users hovers over the corresponding parent menu item.

Add a script reference to pull in the JQuery library from Google API into the <head> of your page.  Alterantively you can download the library locally and reference it but for simplicity I’ll use the Google API.

JQuery library reference

Finally, after the <html> section, add a <script> section to contain the following JQuery code:

JQuery Script for fade in/out animation

All we are saying here is that if the users hovers the mouse over a Div associated to class nav_main_item, look for the first <ul> tag within that Div and fade in and out its contents.  The stop function just ensures that all previous animations are cancelled reducing any flicker.

And that’s it, the final menu is complete.

Like I mentioned at the start of this blog, If you want me to send you the source for this menu then you can contact me using the form on the ‘About’ section of my blog.  I should be able to respond quickly.

 

 

Reading an XML file using Linq to XML

A quick and post and more for my own reference but I recently needed to read some elements from an XML document which can be accomplished much easier these days using Linq to XML.

So if I have a simple XML document :

Sample XML document

I can read this using Linq as below (language is C#) :

C# routine to parse the XML document using Linq

In this method I am first loading the XML file into an XDocument Object found under the System.XML.Linq namespace.

I am then using Linq to return a collection of Items which represent the Parent ‘Client’ Nodes, using the Descendants function.

Then we can loop though each Client Node and simply extract the Element Values for the KEY and POSITION Nodes.  Its also worth noticing in this example that I have included an attribute at the CLIENT Node level.  Using Attributes().First() I am requesting the first attribute found attached to my CLIENT object.

Like I mentioned nothing difficult here but a handy little reference

 
Leave a comment

Posted by on June 22, 2012 in C#, Linq, Uncategorized, XML

 

LayerTwo – Simple Framework

For anyone that is looking to develop smartly styled and interactive interfaces for their Web sites then the new Simple Framework designed and developed by LayerTwo is well worth a look plus its completely free to download and use.

Leverage the power of Simple Framework with some great looking templates already available

Built on the 960 Grid System, the Simple Framework provides the HTML structure, basic styling and common jQuery components out of the box so you can dive straight into designing great looking websites in just a few seconds.

Available at www.layertwo.co.uk

 
Leave a comment

Posted by on June 20, 2012 in web development

 

Client Server Progress Bar using SignalR

I am currently involved on a web application project which does some pretty heavy processing on the server side.  The Client makes a request to the Server, and waits patiently for a response once the server side processing is complete.  However in the disconnected world of the web this can prove a problem.  For example The client will make a request and wait for a response until a timeout is reached.  At this point the client will stop waiting for the reponse while the server is still processing the request causing a whole host of performance issues.

So I thought, wouldn’t it be nice if I could keep the Client informed of the progress of the Server.  Maybe a Progress Bar on the client which is updated by the Server at various stages of the process.

Using SignalR I was able to enforce this communication between the Server and Client and created a basic example in this blog so you can do the same.

Step 1 – The Concept

The concept for this example is:

I will create a simple aspx page which will host a progress bar.  The intention being that this progress bar is updated in real time by the server.  To allow the server to update the client I will use SignalR.  I am also using the Twitter Bootstrap framework for my styling and layout although it is not essential.

Step 2 – Setting up the Environement

Open Visual Studio and Create a new ASP.NET Web Application

Using the Package Manager Console, Install the SignalR Libraries using NuGet (This will also ensure JQuery is installed) e.g.

Finally add the Twitter Bootstrap CSS which we will use to give our progress bar a nice styling e.g.

Twitter Bootstrap provides us with out of the box HTML, CSS and Javascript for out user interfaces, is excellent and can be found here http://twitter.github.com/bootstrap/

Step 3 – Server Side Code

For simplicity we are going to create a simple method which invokes a timer and then periodically uses Signal R to pass a message back to the client updating the progress of the progress bar.

Using the Default.aspx.cs our code should look like this:

Here I have created a class called Chat which derives from Hub.  Yep if SignalR is installed correctly its that simple, the rest of the code is conerned with updating the progress bar.

I have created a method called Send() which is created on the Hub Server and will be linked to on the client in step 4.  This method simply creates a timer with a tick interval of 100ms and when each interval elapses calls to the timer_Elapsed event.  This event then evaluates my counter (which starts at 1) and increments is by 1.  If the result has not reached 100, we make a call to any SignalR clients that are listening and invokes the addMessage function on the client.  Once we reach 100 (or 100% in terms of our progress bar) the timer is stopped.

Step 4 – Client Side Code

Out client side code within Default.aspx is slightly more complex but still pretty straight forward:

First add the following script references to JQuery and SignalR

Secondly add a link to the Twitter bootstrap CSS:

then add the following markup to the client page:

Notice the code within the <div> with the class name ‘Container’.  This is where I create a simple Progress Bar using the Twitter Bootstrap Styling.  The Width attribute attached to the ‘bar’ is initially set to 0%.  This will be increased incrementally to 100% from the server.

Also noice out Script section.  Here we are referencing out SignalR class on the server and creating out addMessage method which is invoked from the server.  This method simply uses Jquery to grab our progress bar and increment the Width attibute with the value passed back from the server.

I have also added some code to the click event of the button which invokes the Send Message on the server,

Step 5 – Running the Application

If all the steps have been implemented correctly you should be able to run the application abd click the button to see the progress bar being incrementally increased by the server

 
3 Comments

Posted by on May 17, 2012 in ASP.NET, C#, HTML, web development