Maybe you will be interested in reading Building a web application layout 1 if you need to know how did I setup the xhtml and basic CSS. In this part we will try to acomplish two things: Insert a javascript dropdown menu and apply the design I did just to this application.
Step 1: Integrating the js menu with our current layout.
Apply the javascript dropdown menu I created a few days ago. The current example of this menu has the javascript, css and xhtml in the same file, but we are going to split it into the xhtml file we have, the css file we have and we are going to create a javascript file. First of all let's insert the dropdown navigation into the xhtml file inside the #navgation DIV and remove some items:
TLorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam convallis condimentum turpis. Etiam vitae nisl. In sollicitudin risus interdum erat. Mauris nibh ante, ullamcorper sed, viverra sit amet, fermentum non, urna. In imperdiet rutrum risus. In lectus sem, convallis eu, vestibulum eget, fermentum ac, ligula. Etiam condimentum lectus eu magna. Vestibulum viverra nulla vel nisi. Phasellus turpis felis, viverra et, pellentesque vitae, consequat eget, justo. Vestibulum consectetuer, nunc ac placerat porta, sapien ligula sagittis lorem, at ultricies est orci sed sapien. Cras tempor, turpis id dapibus dictum, turpis nunc bibendum leo, nec porttitor dui justo ac nulla. Vivamus scelerisque dictum lectus. Praesent sit amet ante.This is going to be the main block of the webapp. Here we will have tables, lists, text, etc.
As you can see, there's a ul #themenu list inside the #navigation div. Also you can see that we are calling a new file jsddmenu.js
The inside of the jsddmenu is basically the javascript part of the file we did in the javascript dropdown menu post.
function ddjs1_open(id)
{
ddjs1_cancel();
if(item) item.style.visibility = 'hidden';
item = document.getElementById(id);
item.style.visibility = 'visible';
}
function ddjs1_close()
{ timer = window.setTimeout(ddjs1_close2, 300); }
function ddjs1_cancel()
{
if(timer)
{ window.clearTimeout(timer);
timer = null; }
}
function ddjs1_close2()
{ if(item)
item.style.visibility = 'hidden'; }
document.onclick = ddjs1_close;
var timer = 0;
var item = 0;
Now we have our layout with a working dropdown navigation menu and you can see it in this example.
Step 2: Applying a design to our layout.
I did a really simple but clean design for this example and if you take a look at it you can realize that we won't need too many images to accomplish that design. Basically we need to cut 3 gradients and the logo. The rest is done with borders. First, let's modify the css file to make it look like our design. We need to add some inner DIVs inside our main DIVs because our main DIVs are using percentage based dimensions and if we add borders to it, it's going to be difficult to control. We are doing this in Content, Menu and Help DIVs. Example:
This is going to be the main block of the webapp. Here we will have tables, lists, text, etc.
Now we modify the CSS. I did a lot of modifications like borders, colors and of course removing background colors we used at the beginning. Also I called the gradient pictures and the logo I just cut in Photoshop using the slice tool. Here is the modified CSS.
/* LAYOUT */
body {
min-width:780px;
font: 0.75em 'Lucida Grande', Arial, Tahoma, helvetica;
color: #666;
}
p, h1, h2, h3, h4, h5, ul, ol {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#wrapper {
width: 90%;
margin: 0 auto;
}
#header {
overflow: auto;
background: url(images/logo.jpg) no-repeat;
height: 74px;
}
#header a {
display: block;
width: 290px;
height: 65px;
}
#header h1 {
text-indent: -1200px;
}
#header,#footer {
width:100%;
}
#menu, #content, #help {
float:left;
}
#content {
width:57%;
margin-left:20%;
background: url(images/maingrad.jpg) repeat-x top;
}
#content-inner {
border-left: 1px solid #FAA500;
border-bottom: 1px solid #FAA500;
border-right: 1px solid #FAA500;
padding: 10px;
}
#menu {
width:20%;
margin-left:-77%;
background: url(images/subgrad.jpg) repeat-x top;
}
#menu-inner {
border-left: 1px solid #FAA500;
border-bottom: 1px solid #FAA500;
padding: 10px;
}
#help {
width:23%;
background: url(images/subgrad.jpg) repeat-x top;
}
#help-inner {
border-right: 1px solid #FAA500;
border-bottom: 1px solid #FAA500;
padding: 10px;
}
#footer {
clear:both;
text-align: center;
}
/* MENU */
#themenu
{ margin: 0;
padding: 0;
z-index: 90;
height: 24px;
border: 1px solid #FAA500;
background: url(images/menugrad.jpg) repeat-x top;
}
#themenu li
{ margin: 0;
padding: 0;
list-style: none;
font-family: 'Lucida Grande', Arial, Tahoma, helvetica;
font-size: 13px;
float: left;
}
#themenu .mainmenu
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
color: #666;
text-align: center;
text-decoration: none}
#themenu li a:hover
{ background: #ecc85a}
#themenu .submenu
{ margin: 0;
padding: 0;
background: #FFF6DB;
position: absolute;
visibility: hidden;
border: 1px solid #FAA500;
}
#themenu .submenu a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
text-align: left;
text-decoration: none;
background: #FFF6db;
color: #666;
font-size: 11px;
}
#themenu div a:hover
{
background: #ecc85a;
color: #FFF;
}
And after all these steps we have 3 files: XHTML file CSS file JS file Pretty much the basic structure every page must have. Remeber to avoid to have CSS code inside the XHTML, same as the Javascript. Now here is the final look of our WebApp layout. If you want to use these files, make sure you give me some credit. In future steps I plan to add table designs, icons, etc.
Post new comment