Web Menu
by Unknown Feb 2013 2,206 Views
Hello i am bumba...
This is just to help or let you know how easily you can create a web page/site.
It covers only CSS1 CSS2 CSS3, HTML, JAVASCRIPT, JQUERY, VBSCRIPT, PHP/ASP.
My main aim is only to let you know about MENU PROGRAMMING clearly... ENJOY !
This is not for your pass time, i have really worked hard (3 years) on this package... its true that i have never worked with any CO. or i hate working for others !
I am a software developer, a half-done film director, a poet, a lover inside...
But this does not mean i have abundan welth...the truth is... i live in STRIFE, YES !
So...the codes and text i am gonna write here would really be helpful enough but, ..Dont just rely on me, copy all the codes and paste in NOTE...run in your web browser and then come back here again and CLICK on AD !
CSS is the highway to heaven for every web programmer ! belive me, its true. Hey what about HTML5 or CSS3....???
Lets start with POPUP::
Create one .css file first as::
( pop.css ) ::
-------------
.container{
display:none;
position:fixed;
top:183px;
left:200px;
width:350px;
height:100px;
background:url("img/background.jpg") no-repeat;
border-left:10px solid black;
border-top:10px solid black;
border-right:10px solid black;
border-bottom:10px solid black;
}
.pop2{
display:none;
position:fixed;
top:183px;
left:200px;
width:350px;
height:100px;
background:url("img/pop2.jpg") no-repeat;
border-left:10px solid black;
border-top:10px solid black;
border-right:10px solid black;
border-bottom:10px solid black;
}
.pop3{
display:none;
position:fixed;
top:183px;
left:200px;
width:350px;
height:100px;
background:url("img/pop3.jpg") no-repeat;
border-left:10px solid black;
border-top:10px solid black;
border-right:10px solid black;
border-bottom:10px solid black;
}
.pop4{
display:none;
position:fixed;
top:183px;
left:200px;
width:350px;
height:100px;
background:url("img/pop4.jpg") no-repeat;
border-left:10px solid black;
border-top:10px solid black;
border-right:10px solid black;
border-bottom:10px solid black;
}
/* end of css */
/* background image maybe a blank image/ text only */
----------------------------
Now write some code and be a programmer ...haahaa. This is absolute JQUERY.
( pop.js ) ::
-------------
$(document).ready(function(){
$("div.container").click(function(){
$("div.pop2").slideDown();
});
});
$(document).ready(function(){
$("div.pop2").click(function(){
$("div.pop3").slideDown();
});
});
$(document).ready(function(){
$("div.pop3").click(function(){
$("div.pop4").slideDown();
});
});
$(document).ready(function(){
$("div.pop4").click(function(){
$("div.pop4").slideUp();
$("div.pop3").hide();
$("div.pop2").hide();
});
});
--+++------
OK ! Now you have done it really !... place these two files in your html file as ::
VOILA ! YOU ARE DONE.
What happened !?!?!?...You are a CLEVER programmer, so you know where can you find "jquery.js" which is needed to RUN your CODES !.
Its OK...i am gonna help you soon !::
Add jQuery From the Google AJAX Libraries :: ( in your html file )::
Remember to specify proper directory...ENJOY !
FOLLOW ME ON NEXT :: MOUSE MOVE...letz do some HOVERING...haahaa