We Keep Coding

Hide button prev in first child

I have multiple text/tab slider jquery and 2 button ( next ) , ( prev ) -
I need edit in code javascrpit for hide button
I need hide button ( next ) in last child/tab and hide button ( prev ) in first child/tab I use blogger
$(function () {
$("ul.large-tabs")
.tabs("div.large-panes > div.large-pane")
.slideshow({
next: '.next',
prev: '.prev'
});
});
ul.table-tabs, ul.large-tabs {
padding: 0;
margin: 0;
}
ul.large-tabs {
overflow: hidden;
margin-top: 22px;
}
.large-tabs li {
width: 230px;
float: left;
display: block;
height:47px;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
text-decoration: none;
}
.large-tabs li h2 a {
text-decoration:none;
margin-left: 19px;
font-family:"CoHeadlineRegular", Arial, Helvetica, Tahoma;
font-size: 24px;
color:white;
margin-top:12px;
text-shadow:#000000 0px 2px;
}
.large-tabs {
text-align: center;
display:none;
}
.large-tabs h2 {
font-size: 15px;
text-shadow:#000000
}
.large-tabs li:nth-child(2) {
margin: 0 3px;
}
.large-pane {
display:none;
overflow: hidden;
position:absolute;
top:0;
left:0;
padding:30px;
}
.large-pane p {
color:white;
margin:0 0 21px;
}
.large-panes {
background: #3e408a;
clear: both;
padding: 1px 13px 16px;
width: 670px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
position:relative;
overflow:hidden;
min-height:100px;
}
a.arrow {
cursor:pointer;
color:#fff;
font-size:16px;
position:absolute;
bottom:8px;
z-index:10;
}
a.rightarrow1 {
right:12px;
}
a.leftarrow1 {
left:12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!-- the tabs -->
<ul class="large-tabs">
<li><h2>Tab 1</h2></li>
<li><h2>Tab 2</h2></li>
<li><h2>Tab 3</h2></li>
</ul>
<!-- tab "panes" -->
<div class="large-panes">
<!-- previous pane -->
<a class="prev arrow leftarrow1">« Prev</a>
<!-- tab 1 -->
<div id="div1" class="large-pane">
<p>Tab 1 Text</p>
</div>
<!-- tab 2 -->
<div id="div2" class="large-pane">
<p>Tab 2 Text</p>
</div>
<!-- tab 3 -->
<div id="div3" class="large-pane">
<p>Tab 3 Text</p>
</div>
<!-- next pane -->
<a class="next arrow rightarrow1">Next »</a>
</div>

I noticed that your JS is already adding a "disabled" class on your buttons.
Adding .disabled{display:none;} on your CSS will surely do the trick.
$(function () {
$("ul.large-tabs")
.tabs("div.large-panes > div.large-pane")
.slideshow({
next: '.next',
prev: '.prev'
});
});
ul.table-tabs, ul.large-tabs {
padding: 0;
margin: 0;
}
ul.large-tabs {
overflow: hidden;
margin-top: 22px;
}
.large-tabs li {
width: 230px;
float: left;
display: block;
height:47px;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
text-decoration: none;
}
.large-tabs li h2 a {
text-decoration:none;
margin-left: 19px;
font-family:"CoHeadlineRegular", Arial, Helvetica, Tahoma;
font-size: 24px;
color:white;
margin-top:12px;
text-shadow:#000000 0px 2px;
}
.large-tabs {
text-align: center;
display:none;
}
.large-tabs h2 {
font-size: 15px;
text-shadow:#000000
}
.large-tabs li:nth-child(2) {
margin: 0 3px;
}
.large-pane {
display:none;
overflow: hidden;
position:absolute;
top:0;
left:0;
padding:30px;
}
.large-pane p {
color:white;
margin:0 0 21px;
}
.large-panes {
background: #3e408a;
clear: both;
padding: 1px 13px 16px;
width: 670px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
position:relative;
overflow:hidden;
min-height:100px;
}
a.arrow {
cursor:pointer;
color:#fff;
font-size:16px;
position:absolute;
bottom:8px;
z-index:10;
}
a.rightarrow1 {
right:12px;
}
a.leftarrow1 {
left:12px;
}
.disabled{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!-- the tabs -->
<ul class="large-tabs">
<li><h2>Tab 1</h2></li>
<li><h2>Tab 2</h2></li>
<li><h2>Tab 3</h2></li>
</ul>
<!-- tab "panes" -->
<div class="large-panes">
<!-- previous pane -->
<a class="prev arrow leftarrow1">« Prev</a>
<!-- tab 1 -->
<div id="div1" class="large-pane">
<p>Tab 1 Text</p>
</div>
<!-- tab 2 -->
<div id="div2" class="large-pane">
<p>Tab 2 Text</p>
</div>
<!-- tab 3 -->
<div id="div3" class="large-pane">
<p>Tab 3 Text</p>
</div>
<!-- next pane -->
<a class="next arrow rightarrow1">Next »</a>
</div>

My top navigation isn't working after using my slider

this is my html page :
<link href="http://fonts.googleapis.com/css family=Source+Sans+Pro:700|Dosis:400,600" rel="stylesheet" type="text/css"/>
<link href="styles/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="shortcut icon" href="../gdigit_icon.png"/>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type='text/javascript' src='scripts/respond.min.js'></script>
<script src="scripts/steps.js"></script>
</head>
<body id="dienstenpage" onload="design()">
<div id="wrapper" >
<div id="topnav" >
<ul>
<li>WELKOM</li>
<li>DIENSTEN</li>
<li><a href="contact.html" title=" contacteren >CONTACT</a></li>
<li><a href="referenties.html" title="Algemene voorwaarden >REFERENTIES</a></li>
</ul>
</div>
<!-- "content" -->
<div id="content" >
<h2>webdesign stappenplan</h2>
<ul id = "issues">
<li>
<h1>Plan</h1>
<p>tekst</p>
<p>tekst</p>
<p> </p>
<a class="next" href="#">next</a>
</li>
<li>
<h1>Design</h1>
<p>tekst</p><p> </p>
<a class="next" href="#">next</a><a class="previous" href="#">prev</a>
</li>
<li>
<h1>Build</h1>
<p>tekst.</p><p> </p>
<a class="next" href="#">next</a><a class="previous" href="#">prev</a>
</li>
<li>
<h1>Refine</h1>
<p>Atekst.</p><p> </p>
<a class="next" href="#">next</a><a class="previous" href="#">prev</a>
</li>
<li>
<h1>Launch</h1>
<p>Wtekst</p><p> </p>
<a class="previous" href="#">prev</a>
</li>
</ul>
and this is my external js. file
function design() {
var theImage = $('#issues li');
var theWidth = theImage.width();
var theHeight = theImage.height();
var count = $('#issues').children().length;
//wrap into mother div
$('#issues').wrap('<div id="mother" />');
//assign height width and overflow hidden to mother
$('#mother').css({
width: function() {
return theWidth;
},
height: function() {
return theImage.height();
},
position: 'relative',
overflow: 'hidden' ,
});
//get total of image sizes and set as width for ul
var totalWidth = count * theWidth;
$('#issues').width(totalWidth);
$('#issues li').width(theWidth);
$('#issues li').on("swipeleft",function(){
var ind = $(this).index() ; if (ind +1 < count ) {
$(this).parent('ul').animate({marginLeft: (-(ind + 1 ) * theWidth)}, 500);}
});
$('#issues li').on("swiperight",function(){
var ind = $(this).index() ; if (ind > 0 ) {
$(this).parent('ul').animate({marginLeft: (-(ind -1) * theWidth)}, 500);}
});
$('#issues li a').click(function() {
var ind = $(this).closest('li').index() ;
if($(this).is(".next")){
$(this).parent('li').parent('ul').animate({marginLeft: (-(ind + 1) * theWidth)}, 1000);
}
else if($(this).is(".previous")){
$(this).parent('li').parent('ul').animate({marginLeft: (-(ind - 1) * theWidth)}, 1000) ;
}
else if($(this).is(".startover")){
$(this).parent('li').parent('ul').animate({marginLeft: (0) }, 1000)
}
});
}
what is happening :the slider works fine , but when i want a link of the top navigation, it puts the asked page under the slider in stead of opening it normal. each page of alink i choose from the top navigation goes under the slider ....
when i putted the javascript inside the html , everything worked fine .
and this is my css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* -------------------------------- */
/* Global */
/* -------------------------------- */
body {
background-color: #eeeeee;
background-position: center center;
background-attachment:fixed;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: Dosis , serif;
}
#dienstenpage { background-image:url('../images/comp03.png'); }
#indexpage { background-image:url('../images/comp05.png'); }
#dienstenpage { background-image:url('../images/comp03.png'); }
#contactpage { background-image:url('../images/comp02.png'); }
#referentiepage { background-image:url('../images/comp01.png'); }
/* --------------------------- */
/* containers */
/* --------------------------- */
/*wrapper */
/*--------*/
#wrapper { width: 96%; max-width:920px; margin : auto ;padding:2%; height:100%; }
/*topnav*/
/*------*/
#topnav { font-size :18px; min-height:10%;}
#topnav ul { width: 100% ; float : left ; padding: 10px 0px; }
#topnav ul li { display:inline-block;}
#topnav ul li a { float: left; padding: 10px 40px; text-decoration:none;letter-spacing: 1px;}
#topnav a:link { color:#FFFFFF;}
#topnav a:visited { color:#FFFFFF;}
#topnav a:hover { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
#topnav a:active { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
#topnav a:focus { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
.currentLink { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
/*gdigit*/
/*-------*/
#gdigit { float:left; width :100% ; text-align: left;color: #ffffff; }
#gdigit h4 { font-size: 100px ; padding : 0px 40px; }
.style1 { color: #C5AA6A;}
.style2 { color: #85D1DD; font-size: 70px;}
.style3 { color: #000000;}
.style4 { font-family:'Source Sans Pro';text-shadow: 1px 1px 0px rgba(71, 112, 119, 0.5);}
.style5 { font-family:'Source Sans Pro';}
/*content*/
/*-------*/
#content { float:left; width :100% ; padding : 10px 0px ;margin-top:0px; color: #ffffff; height: 60vh; }
#content h1 { font-size: 30px ; color: #ffffff; padding-top :30px ; padding-bottom :30px ;text-align: left; }
#content h2 { font-size: 22px ; color: #ffffff; padding :20px 40px 10px 40px; text-align: left;text-transform:uppercase; letter-spacing:2px; }
#content h3 { font-size: 16px ; color: #ffffff; padding-top :20px ; padding-bottom :20px ;text-align: left; }
#content h4 { font-size: 100px ; font-weight:bold; text-align: center; }
#content p { font-size: 22px; color: #ffffff;line-height:170%;text-align:justify;padding :0px 40px 0px 40px;}
#container01 { float:right; width :70% ;text-align:center ;margin-top: 100px; }
#container01 p { font-size: 22px; color: #ffffff;line-height:170%;padding :0px 40px 0px 40px;text-align: center ;}
.tekstkolommen { overflow: hidden; padding:0px ; width:100%; }
.kolomlinks { float:left; width:35%; }
.kolomrechts { float:right; width:63%; }
.kolomlinks div, .kolomrechts div { margin:0px; padding:8px 0px 0px 40px; font-size:18px; }
.coli { font-size: 22px; color:#FFFFFF;text-align : left;line-height:210%;padding-left:40px;}
.staplink { color:#FFFFFF; background: rgba(204, 204, 204,0.4);text-transform:uppercase;text-decoration:none;letter-spacing:3px;}
a:link { color:#FFFFFF}
a:visited { color:#FFFFFF}
a:hover { color:#FFFFFF}
a:active { color:#FFFFFF}
a:focus { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
#content ul li { font-size: 20px;line-height:170%; }
#content ul { padding-top:10px;}
#issues { }
#issues li {list-style: none; float: left; position:relative; color: #FFFFFF; }
#issues li a {text-indent:-9999px; }
#issues li a.next { position:absolute; right:0px; top :100px; width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 25px solid #85D1DD; }
#issues li a.previous { position:absolute; left: 0px; top :100px;
height: 0;
border-top: 40px solid transparent;
border-right: 25px solid #85D1DD;
border-bottom: 40px solid transparent; }
#issues li a.startover{position:absolute; right:20px; top :0px;}
#issues li h1 { color: #FFFFFF; font-size: 22px;margin-left: 40px;margin-right: 40px;color: #ffffff; text-transform:uppercase; }
#issues li p { font-size: 20px; font-weight: normal;color: #ffffff; line-height:170%; text-align:justify; }
/*forms */
/*------*/
form { color:#FFFFFF;width:100%; }
submit,input,textarea{background: rgba(204, 204, 204,0.6);color :#FFFFFF; padding: 3px;width:70%; border:1px solid #FFFFFF;font-size:20px;font-family:Dosis,serif; }
.style6 { margin-top: 30px; margin-left:25%; width:72%; }
#contact-form ol { list-style-type:none;}
#contact-form ol li { font-size:20px;}
#contact-form p { float:left; font-size:20px; width: 100%;}
#contact-form label { float:left; width:25%;}
#contact-form li { margin-top:5px; }
#fout
/*footer*/
/*------*/
#footer {clear:both;width:100% ; color : #FFFFFF; font-size:11px; }
#footer h4 {font-size: 100px ; font-weight:bold; text-align: left; }
/* Media Queries */
#media screen and (min-width: 481px) and (max-width: 800px)
{
#gdigit h4 { font-size: 70px ; padding : 0px 40px; }
.kolomlinks { width:42%; }
.kolomrechts { width:58%; }
.coli { line-height:120%;}
label { width:100% ; }
submit,input,textarea,input{ width:95%; float:left;background: rgba(204, 204, 204,0.3); }
.style6 { margin-top: 20px; margin-left:0; width:50%; }
#issues li a.next { border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 20px solid #85D1DD; }
#issues li a.previous { border-top: 30px solid transparent;
border-right: 20px solid #85D1DD;
border-bottom: 30px solid transparent; }
}
#media screen and (max-width: 480px)
{
#dienstenpage { background-image:url(../images/compmob3.png); }
#indexpage { background-image:url(../images/compmob5.png); }
#dienstenpage { background-image:url(../images/compmob3.png); }
#contactpage { background-image:url(../images/compmob2.png); }
#referentiepage { background-image:url(../images/compmob1.png); }
#topnav { padding-top: 5px;padding-bottom : 0px;}
#gdigit h4 { font-size: 70px ; padding : 0px 40px; }
#content { margin-top:10px;padding-top : 0;margin-bottom :30px;}
#content p { font-size: 18px; color: #ffffff;line-height:110%;text-align:justify;}
#container01 { float:left; width :100% ;text-align: center ;margin-top: 0px;}
#container01 p { font-size: 18px; color: #ffffff;line-height:100%;text-align: justify ;padding-bottom:10px;}
#content h4 { font-size: 70px ; font-weight:bold; text-align: center; }
.style2 { color: #85D1DD; font-size: 45px;}
.style3 { color: #000000;}
.style4 { background: rgba(204, 204, 204,0.2); }
.style6 { margin-top: 10px; margin-left:0; width:100%; }
.kolomlinks { float:left; width:100%; }
.kolomrechts { float:left; width:100%; }
.coli { line-height:120%;}
label { width:100% ; }
submit,input,textarea,input{ width:95%; float:left;background: rgba(204, 204, 204,0.3); }
.style5 { margin-top: 10px; width:100%; margin-left:0;background: rgba(204, 204, 204,0.3);}
#footer { clear:both; width:100% ; color: #FFFFFF; position : relative; min-height : 150px; }
#footer h4 { font-size: 50px ; font-weight:bold; text-align: center;height :60px;}
#issues li a.next { border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 20px solid #85D1DD; }
#issues li a.previous { border-top: 30px solid transparent;
border-right: 20px solid #85D1DD;
border-bottom: 30px solid transparent; }
}

when you add bootstrap with jQuery Mobile it will create some conflict, It may disturb your css or some jquery event, so you are recommended to use just custom feature when you use jQuery Mobile in your template,
http://jquerymobile.com/download-builder/
you can create your custom jQuery mobile file, and check only those feature you want in your mobile.
Many Thanks

How do I resize an Avatar image into a smaller one in a fixed header navbar using jquery and css

I need help about resize avatar image into a smaller one in a fixed header navbar. I created this DEMO from codepen.io
When you scroll down on the page then the navbar to be a fixed. But i want to add a avatar in a navbar when scroll down like twitter. Anyone can help me here ?
JQuery
$(document).ready(function() {
$('.globalHeader').scrollToFixed();
$('.footer').scrollToFixed( {
bottom: 0,
limit: $('.footer').offset().top
});
var summaries = $('.summary');
summaries.each(function(i) {
var summary = $(summaries[i]);
var next = summaries[i + 1];
summary.scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = 10;
if (next) {
limit = $(next).offset().top - $(this).outerHeight(true) - 10;
} else {
limit = $('.footer').offset().top - $(this).outerHeight(true) - 10;
}
return limit;
},
zIndex: 0
});
});
$('#sponsor').scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = $('.footer').offset().top - $('#sponsor').outerHeight(true) - 10;
return limit;
},
minWidth: 1000,
zIndex: 999,
fixed: function() { },
dontCheckForPositionFixedSupport: true
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor preUnfixed');
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor unfixed');
$(this).css('color', '');
$('.globalHeader').trigger('unfixed.ScrollToFixed');
});
$('#sponsor').bind('fixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor fixed');
$(this).css('color', 'red');
$('.globalHeader').trigger('fixed.ScrollToFixed');
});
});
CSS
.globalHeader {
z-index: 90;
background-color: #323949;
position: fixed;
width: 100%;
border-bottom: 1px solid #3f4858;
color: #fff;
font-size: 40px;
font-family: arial, sans-serif;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
.globalHeader_in {
z-index: 99999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
min-width: 960px;
width: 100%!important;
max-width: 1580px;
height: 52px;
left: 0;
top: 0;
padding: 0 20px 0 15px;
margin: auto;
}
.profile-kapak-alani {
width:100%;
height:385px;
background-position: center top;
background-size: 100% auto;
background-size:cover;
border-bottom:1px solid #3f4858;
background: #323949 url(icons/genis.png) repeat 0 0;
}
.profil-kapak-profil-resim {
width:900px;
height:385px;
margin:0px auto;
}
.profil-kapak {
width:900px;
height:385px;
overflow:hidden;
}
.profil-kapak img {
width:900px;
}
.profil-ana-etki-alani{
width: 900px;
margin: auto;
padding: 52px 30px 0;
overflow:hidden;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
}
.kullanici-profil-fotografi-alani {
float:left;
width:200px;
height:200px;
margin-top:-110px;
margin-left:30px;
position:absolute;
padding:8px;
z-index:5;
background-color: rgba(50, 57, 73, 1);
border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.5) inset;
}
.kullanici-profil-fotografi-alani span {
display: inline-block;
overflow: hidden;
vertical-align: middle;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
}
.profil-fotografini-degistir {
position:absolute;
width:55px;
height:35px;
margin-top:-38px;
margin-left:4px;
}
.link-abonelik-takipci-fotograf-takip {
width:100%;
height:60px;
position:relative;
border-bottom:1px solid #3f4858;
background-color: #323949;
border-top:1px solid #3f4858;
box-shadow: 0 -7px 5px -6px #000000;
-webkit-box-shadow: 0 -7px 5px -6px #000000;
-moz-box-shadow:0 -7px 5px -6px #000000;;
-o-box-shadow:0 -7px 5px -6px #000000;;
}
.la-t-f-t {
width:900px;
height:60px;
margin:0px auto;
}
.ll-p-t{
float:right;
width:630px;
height:60px;
}
.pay-t{
float:left;
width:88px;
height:60px;
padding-left:15px;
padding-right:15px;
}
.pay-t-t {
font-weight:normal;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:11px;
margin-top:10px;
float:left;
width:88px;
text-align:center;
}
.p-t-t-a{
font-weight:bold;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:18px;
text-align:center;
margin-top:8px;
float:left;
width:88px;
}
#navbar {
position: absolute;
width:100%;
height:60px;
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
}
.content{
margin:0px auto;
width:900px;
height:900px;
}
.footer {
background-color: #eee;
padding: 0px;
clear: both;
}
.footer.scroll-to-fixed-fixed {
color: red;
}

For the large background image, you can simply use $(window).scroll() to slow down the scrolling. You also need to set your content to position: relative so it sits above the overflowing background image (since it will scroll at a much slower rate). But your nav bar has a dynamically added z-index:auto which will then cause it to sit behind your content (probably from the plugin) so you'll have to use !important on your #navbar's z-index:
JS
$(window).scroll(function(){
var scrolled = $(this).scrollTop();
$(".profil-kapak").css({"top":(scrolled*0.7)+"px"});
});
CSS
#navbar {
position: absolute;
width:100%;
height:60px;
z-index: 4 !important; //add, need to override the plugin
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
position: relative; //add
}
For the mini profile look, you can set up the container in your nav bar set to display: none and do a simple fade in/out with the bigger one when the nav bar get's fixed:
HTML
<div class="mini-profile-wrapper">
<div class="mini-profile-img">
<img src="http://www.designbolts.com/wp-content/uploads/2013/11/Frozen-Movie-poster-payoff-Wallpaper-HD1.jpg">
</div>
<p class="profile-name">John Doe</p>
</div>
CSS
.mini-profile-wrapper{
display: none;
float: left;
}
.mini-profile-img{
display: inline-block;
width: 80px;
padding: 5px 5px 0 0;
overflow: hidden;
vertical-align: middle;
}
.mini-profile-img img{
max-width: 100%;
display: inline-block;
}
.mini-profile-wrapper .profile-name{
display: inline-block;
vertical-align: middle;
font-weight:normal;
color:#FFF;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:20px;
}
You can Use pre-existing JS function
$('#navbar').bind('unfixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeIn();
$(".mini-profile-wrapper").fadeOut();
});
$('#navbar').bind('fixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeOut();
$(".mini-profile-wrapper").fadeIn();
});
CODEPEN

Twitter is doing some interesting things in this case. The container #1 for the small avatar is in the navigation bar all the time in the same place. That avoids messing around with the placement of the avatar and any other outside elements.
The content of this container #1 is container #2 and has a given height and in its not-fixed state a padding-top of the same value. And because of the overflow: hidden, the inner content (avatar, texts) gets cut of.
As soon as the navigation bar gets fixed, the padding-top of container #2 is set from the height to 0, and thanks to a CSS transition, we have a nice animation. In addition, the big avatar get animated away.
Conclusion: Make the smaller version and place in a spot where you want. Keep this position all the time and just change its visibility. Can be the way described above, can also just be a simple visibility: hidden. Be creative. And then, when you fix your navigation, simply show the small avatar, and hide it, when its going to be unfixed.

Dropdown menu problems, DIV and or CSS issues

Alright, I've periodically looked and messed around with this for around 6 weeks and so far have been unable to figure out how to solve this thing. Though I assume it's something small and relatively simple to people with more experience.
Background:
I am starting with a template that had a good js slideshow that I liked and started customizing it. When i got to a certain point I realized I wanted to add a drop-down menu. When I first added the ul sub-menu for the drop-down nothing appeared to happen. After messing with it for some time i created a test page where I only added the drop-down menu to see if the js was effecting it in any way and it worked as expected. I then added only the js in to see if my 0 knowledge of js was effecting it and it worked (no alignment info).
At this point i went back to the original code and it stopped working. so I went online and got some example code to put in that I knew worked and that too didn't work. At one point I started messing with the div tags in the html and was able to get some resemblance of what I was looking for though the content started shifting down sometimes on rollover; other times it would drop the content 100% of the time. I moved to playing with z-index's and no matter what I did that didn't seem to make a difference either.
The question:
What the heck am I not seeing here? All I'm looking for is a drop-down that goes over top of the js slideshow without pushing it down. I'm pretty sure this issue revolves around the fact that there are so many div's to make this layout and they're conflicting somehow. Any help someone could give would be absolutely amazing because I'm going crazy.
Here is the index page with issues:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mitchell Faherty</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:700" rel="stylesheet" type="text/css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/tms-0.3.js"></script>
<script src="js/tms_presets.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
</head>
<body id="page1">
<!--==============================header=================================-->
<header>
<div class="main">
<h1> Mitchell Faherty <em>Wedding photo / Videos</em> </h1>
</div>
<div class="menu-row">
<div class="main">
<div class="container_12">
<div class="wrapper">
<div class="grid_12">
<nav>
<ul class="menu">
<li><a class="active" href="index.html">Home</a></li>
<li>About</li>
<!--
<ul>
<li>About1</li>
<li>About2</li>
<li>About3</li>
</ul>
-->
<li>Photos</li>
<li>Videos</li>
<li>Links</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="main">
<div class="slider-wrapper">
<div class="slider">
<ul class="items">
<li> <img src="images/front-slider/slider-img1.jpg" alt=""> </li>
<li> <img src="images/front-slider/slider-img2.jpg" alt=""> </li>
<li> <img src="images/front-slider/slider-img3.jpg" alt=""> </li>
<li> <img src="images/front-slider/slider-img4.jpg" alt=""> </li>
</ul>
</div>
</div>
</div>
</header>
<!--==============================footer=================================-->
<footer>
<div class="main">
<div class="container_12">
<div class="wrapper">
<div class="grid_3 suffix_3">
<ul class="list-services">
<li><a class="item-1" href=""></a></li>
<li><a class="item-2" href=""></a></li>
<li><a class="item-3" href=""></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script>
$(window).load(function () {
$('.slider')._TMS({
duration: 1000,
easing: 'easeOutQuint',
preset: 'slideDown',
slideshow: 7000,
banners: false,
pauseOnHover: true,
pagination: true,
pagNums: false
});
});
</script>
</body>
</html>
And here is the CSS:
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
/*********************************Global Properties**********************************/
html {
width:100%;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
color:#000;
min-width:984px;
background:#f8f8f8
}
.ic {
border:0;
float:right;
background:#fff;
color:#f00;
width:50%;
line-height:10px;
font-size:10px;
margin:-220% 0 0 0;
overflow:hidden;
padding:0
}
#page3 {
min-width:1034px;
}
.main {
width:984px;
padding:0;
margin:0 auto;
font-size:14px;
line-height:25px;
}
a {
color:#f00058;
outline:none;
}
a:hover {
text-decoration:none;
}
.col-1, .col-2 {
float:left;
}
.wrapper {
width:100%;
overflow:hidden;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:18px;
}
.p1 {
margin-bottom:8px;
}
.p2 {
margin-bottom:15px !important;
}
.p3 {
margin-bottom:30px !important;
}
.p4 {
margin-bottom:40px;
}
.p5 {
margin-bottom:50px;
}
.reg {
text-transform:uppercase;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.it {
font-style:italic;
}
.color-1 {
color:#f00058;
}
.color-2 {
color:#7c7c7c;
}
.img-border1 {
float:left;
padding:3px;
background:#fff;
border:1px solid #e5e5e5;
}
.img-border2 {
float:left;
padding:3px;
margin-right:15px;
background:#fff;
border:1px solid #e5e5e5;
}
/*********************************Boxes**********************************/
.indent {
padding:0 15px;
}
.indent-top {
padding-top:5px;
}
.indent-left {
padding-left:30px;
}
.indent-right {
padding-right:35px;
}
.indent-bot {
margin-bottom:20px;
}
.indent-bot2 {
margin-bottom:18px;
}
.indent-bot3 {
margin-bottom:45px;
}
.prev-indent-bot {
margin-bottom:10px;
}
.img-indent-bot {
margin-bottom:25px !important;
}
.margin-bot {
margin-bottom:35px;
}
.img-indent {
float:left;
margin:0 20px 0px 0;
}
.img-indent2 {
float:left;
margin:0 30px 0px 0;
}
.img-indent3 {
float:left;
margin:0 10px 0px 0;
}
.img-indent-r {
float:right;
margin:0 0px 0px 20px;
}
.buttons a:hover {
cursor:pointer;
}
.menu li a, .list-1 li a, .list-2 li a, .link, .button, h1 a {
text-decoration:none;
}
/*********************************header*************************************/
header {
width:100%;
background:#fff;
position:relative;
z-index:2;
}
h1 {
padding:36px 0 0 22px;
position:relative;
overflow:hidden;
margin-bottom:27px;
}
h1 a {
display:block;
width:230px;
height:77px;
text-indent:-9999em;
background:url(../images/wedding-logo.png) 0 0 no-repeat;
float:left;
margin-right:5px;
}
h1 em {
display:inline-block;
font-family: 'PT Sans', sans-serif;
font-size:14px;
font-weight:400;
line-height:2em;
color:#888;
text-transform:uppercase;
padding-top:31px;
}
/*********************************Menu**********************************/
.menu-row {
width:100%;
padding:1px 0 5px;
background:url(../images/menu-row-tail.png) center top repeat-x;
}
#page1 .menu-row {
margin-bottom:22px;
}
.menu {
width:100%;
background:url(../images/menu-spacer.gif) left top no-repeat;
overflow:hidden;
}
.menu li {
float:left;
position:relative;
background:url(../images/menu-spacer.gif) right top no-repeat;
}
.menu li a {
display:inline-block;
height:60px;
overflow:hidden;
font-family: 'PT Sans', sans-serif;
font-size:17px;
font-weight:400;
line-height:59px;
padding:0 50px;
color:#fff;
text-transform:uppercase;
}
.menu li a.active, .menu > li > a:hover {
background:url(../images/menu-active-tail.gif) 0 0 repeat-x #f00058;
}
/*********************************Drop Down**********************************/
ul#nav {
margin: 0 0 0 200px;
}
ul.drop a {
display:block;
color: #fff;
font-family: Verdana;
font-size: 14px;
text-decoration: none;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #fff;
background: #555; color: #fff;
}
ul.drop {
position: relative;
z-index: 107;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
padding: 5px 10px;
}
ul.drop li.hover, ul.drop li:hover {
position: relative;
z-index: 109;
cursor: default;
background: #1e7c9a;
}
ul.drop ul {
/*visibility: hidden;
position: absolute;
top: 100%;
left: 0; */
display:none;
z-index: 108;
width: 195px;
background: #555;
border: 1px solid #fff;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px;
left: 100%;
}
ul.drop li:hover > ul {
/*visibility: visible */
display: block;
}
/*********************************Slider**********************************/
.slider-wrapper {
width:745px;
height:540px;
padding:54px 0 0 150px;
background:url(../images/slider-bg.png) 0 0 no-repeat;
overflow:hidden;
}
.slider {
width:690px;
height:460px;
}
.items {
display:none;
}
.pagination {
position:absolute;
left:290px;
bottom:-62px;
z-index:99
}
.pagination li {
float:left;
padding-right:6px;
}
.pagination a {
display:block;
width:24px;
height:24px;
background:url(../images/slider-pagination.png) right top no-repeat;
cursor:pointer;
}
.pagination li.current a {
cursor:default;
}
.pagination li.current a, .pagination a:hover {
background-position:left top;
}
/*********************************Content*************************************/
#content {
width:100%;
padding:35px 0 53px;
background:#fff;
position:relative;
z-index:1;
}
h2 {
font-family: 'PT Sans', sans-serif;
font-size:37px;
font-weight:700;
line-height:1.2em;
color:#000;
margin-bottom:15px;
letter-spacing:-1px;
}
h3 {
font-family: 'PT Sans', sans-serif;
font-size:23px;
font-weight:700;
line-height:2em;
color:#000;
margin-bottom:7px;
}
h6 {
color:#f00058;
}
.tdate-1 {
display:block;
color:#7c7c7c;
font-size:14px;
line-height:20px;
}
.tdate-1 a {
color:#7c7c7c;
}
.border-bot {
width:100%;
padding-bottom:20px;
background:url(../images/pic-4.gif) 0 bottom repeat-x;
}
.q1, .q2, .q3 {
width:100%;
position:relative;
}
.quote-marker1 {
display:block;
width:15px;
height:21px;
background:url(../images/pic-1.png) 0 0 no-repeat;
position:absolute;
top:30px;
left:-1px;
z-index:2;
}
.quote-marker2 {
display:block;
width:15px;
height:21px;
background:url(../images/pic-2.png) 0 0 no-repeat;
position:absolute;
top:30px;
right:0;
z-index:2;
}
.q1 .quote-bot {
padding-bottom:5px;
padding-left:10px;
background:url(../images/quote-bot.jpg) right bottom no-repeat;
position:relative;
z-index:1;
}
.q2 .quote-bot {
padding-bottom:5px;
padding-right:10px;
background:url(../images/quote-bot.jpg) left bottom no-repeat;
position:relative;
z-index:1;
}
.quote-top {
width:100%;
padding-top:5px;
background:url(../images/quote-top.jpg) right top no-repeat;
}
.quote {
width:100%;
overflow:hidden;
color:#7c7c7c;
background:url(../images/quote-tail.jpg) right top repeat-y;
}
.quote .padding {
padding:18px 25px 19px 30px;
}
.q3 {
background:url(../images/pic-3.png) 0 3px no-repeat;
color:#7c7c7c;
font-style:italic;
margin-bottom:17px;
}
.q3 .padding {
padding:0 0 0 35px;
}
/* -- gallery begin --*/
#gallery {
width:1034px;
height:870px;
margin:0 auto;
position:relative;
overflow:hidden;
}
#js {
position:relative;
width:940px;
margin:0 auto;
font-size:14px;
line-height:25px;
}
div.content {
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
display: none;
width: 410px;
height: 340px;
overflow: hidden;
}
div.content img {
position: relative;
z-index: 2;
}
div.content a, div.navigation a {
}
div.content a:focus, div.content a:hover, div.content a:active {
}
div.controls {
position:relative;
}
div.controls a {
padding: 0px;
}
div.ss-controls {
float: left;
display:none;
}
div.nav-controls {
width:100%;
height:27px;
position:absolute;
left:0;
bottom:56px;
}
div.nav-controls a.prev {
display:block;
width:27px;
height:27px;
background:url(../images/gallery-prev.jpg) 0 0 no-repeat;
text-indent:-9999em;
position:absolute;
top:0;
left:-47px;
z-index:99;
}
div.nav-controls a.next {
display:block;
width:27px;
height:27px;
background:url(../images/gallery-next.jpg) 0 0 no-repeat;
text-indent:-9999em;
position:absolute;
top:0;
right:-47px;
z-index:99;
}
div.slideshow-container {
position: relative;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
z-index:1;
width:900px;
margin-right:48px;
float:left;
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
width: 900px;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {
}
div.caption {
width:100%;
height:100%;
}
div.slideshow span.image-wrapper {
display: block;
width: 900px;
height: 600px;
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
}
div.slideshow a.advance-link {
display: block;
width: 900px;
height: 600px;
padding: 3px;
margin: 0;
font-size:0;
line-height:0;
text-decoration:none;
background:#fff;
border:1px solid #e5e5e5;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.download {
float: right;
}
div.caption-container {
float:right;
width: 270px;
height: 620px;
position:relative;
}
span.image-caption {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0;
z-index:10;
background:#fff;
}
div#thumbs {
padding: 0;
margin:0;
width:100%;
}
ul.thumbs {
padding: 0 0 0 0;
width:100%;
overflow:hidden;
position:relative;
}
ul.thumbs li {
float:left;
margin-right:20px;
width:140px;
}
ul.thumbs li.last {
margin:0;
}
ul.thumbs li span {
display:block;
font-size:15px;
line-height:1.2em;
color:#f9f9f9;
text-transform:uppercase;
font-weight:bold;
}
a.thumb {
display:block;
width:132px;
height:132px;
padding:3px;
background:#fff;
border:1px solid #e5e5e5
}
a.thumb:focus {
outline: none;
}
#controls {
width:100%;
}
div.pagination {
clear: both;
text-align:center;
position:relative;
z-index:10;
}
div.top.pagination {
display:none;
}
div.navigation div.bottom {
display:none;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
padding:0 4px;
font-weight:bold;
color:#fff;
}
div.pagination a:hover {
text-decoration: none;
color:#ffeaa8;
}
div.pagination span.current {
color:#ffeaa8;
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}
/* -- gallery end --*/
.list-1 li {
line-height:20px;
padding:5px 0 5px 15px;
background:url(../images/marker-1.gif) 0 12px no-repeat;
}
.list-1 li a {
display:inline-block;
color:#7c7c7c;
}
.list-1 li a:hover {
color:#f00058;
text-decoration:underline;
}
.link:hover {
text-decoration:underline;
}
.link-1 {
display:inline-block;
line-height:27px;
padding-left:39px;
background:url(../images/marker-2.gif) 0 0px no-repeat;
}
.link-1:hover {
text-decoration:none;
}
.text-1 {
display:block;
color:#f00058;
}
.text-2 {
display:block;
color:#000;
font-style:normal !important;
}
dl span {
float:left;
width:98px;
font-weight:bold;
}
/*********************************Contact Form**********************************/
#contact-form {
display:block;
width:100%;
}
#contact-form label {
display:block;
height:40px;
overflow:hidden;
}
#contact-form input {
float:left;
width:490px;
font-size:12px;
line-height:1.25em;
color:#000;
padding:7px 9px 6px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #e5e5e5;
background:#fff;
outline:none;
}
#contact-form textarea {
float:left;
height:339px;
width:490px;
max-height:339px;
max-width:490px;
font-size:12px;
line-height:1.25em;
color:#000;
padding:7px 9px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #e5e5e5;
background:#fff;
overflow:auto;
outline:none;
}
.text-form {
float:left;
display:block;
font-size:14px;
line-height:30px;
width:75px;
color:#000;
font-family:Arial, Helvetica, sans-serif;
}
.buttons {
padding:13px 10px 0 0;
text-align:right;
}
.buttons a {
margin-left:25px;
}
/*********************************Footer**********************************/
footer {
width:100%;
padding:10px 0 10px;
background:url(../images/footer-tail.gif) center top repeat-x;
}
.list-services {
padding:7px 6px 0 0px;
float:right;
}
.list-services li {
float:left;
padding:0 9px 0 0;
}
.list-services a {
display:block;
width:41px;
height:46px;
text-indent:-9999em;
background:url(../images/social-icons.png) 0 0 no-repeat;
}
.list-services .item-2 {
background-position:-50px 0;
}
.list-services .item-3 {
background-position:-100px 0;
}
.footer-text {
text-align:left;
padding:10px 0 0px;
}
.footer-text span {
display:block;
}

try this CSS
<style>
#select-choice-2-button {float:right;}
.ui-header .ui-title {margin-left: auto; margin-right: auto;}
</style>
try this html
<select name="forma" id="select-choice-2" data-native-menu="false" onchange="location = this.options[this.selectedIndex].value;">
<option value="">More</option>
<option value="http://">Help</option>
<option value="http://">Info</option>

Navigation menu using DIV containers

How to define that by default there should be shown the content of "submenu11" under ther "menu1"?
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul id="css3menu1" class="menu">
<li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
<ul>
<li>SUBMENU11</li>
<li>SUBMENU12</li>
<li>SUBMENU13</li>
<li>SUBMENU14</li>
</ul></li>
<li class="menu"><img src="menu_files/css3menu1/schedule.png"/>MENU2</li>
<li class="menu"><img src="menu_files/css3menu1/analysis.png"/>MENU3</li>
<li class="toplast"><img src="menu_files/css3menu1/gps.png"/>MENU4</li>
</ul>
<div id='submenu11'>
<p> Content </p>
</div>
<div id='submenu12'>
<p> Content </p>
</div>
<div id='submenu13'>
<p> Content </p>
</div>
<div id='submenu14'>
<p> Content </p>
</div>
<script>
$('ul.menu').each(function() {
var $active, $content, $links = $(this).find('a');
$active = $links.first().addClass('active');
$content = $($active.attr('href'));
$links.not(':first').each(function() {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e) {
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
</script>
</body>
CSS stylesheet:
html,body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ffffff;
width: 100%;
margin: 0px auto;
}
p {
margin: 0 0 2em;
}
h1 {
margin: 0;
font:bold 12px Arial;
}
h2 {
margin:0;
color: #55aaff;
font:bold 12px Arial;
}
h3 {
margin:0;
font:normal 10px Arial;
}
h4 {
margin:0;
font:normal 12px Arial;
}
a {
color: #339;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
div#header {
padding:1em;
background:#00557f 100% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font:normal 10px Arial;
text-align:right;
color:#b7ddf2;
margin:0;
}
div.scrollbar {
height: 300px;
overflow: auto;
border: solid 1px #000;
padding: 5px;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
padding:1em;
background:#ddd 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#footer p {
font-style:italic;
font-size:1.1em;
margin:0;
}
/* ----------- Menu ----------- */
ul#css3menu1,ul#css3menu1 ul{
margin:0;
list-style:none;
padding:0;
background-color:#dedede;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
ul#css3menu1 ul{
display:none;
position:absolute;
left:0;
top:100%;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
background-color:#FFFFFF;border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-color:#d4d4d4;
padding:0 10px 10px;
}
ul#css3menu1 li:hover>*{
display:block;
}
ul#css3menu1 li{
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#css3menu1 li:hover{
z-index:1;
}
ul#css3menu1{
font-size:0;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
*display:inline;
}
ul#css3menu1>li{
margin:0;
}
* html ul#css3menu1 li a{
display:inline-block;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;
}
ul#css3menu1 a{
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font:bold 12px Arial;
color:#000000;
text-shadow:#FFF 0 0 1px;
cursor:pointer;
padding:10px;
background-color:#ebf4fb;
background-image:url("mainbk.png");
background-repeat:repeat;
background-position:0 0;
border-width:0 0 0 1px;
border-style:solid;
border-color:#C0C0C0;
}
ul#css3menu1 ul li{
float:none;
margin:10px 0 0;
}
ul#css3menu1 ul a{
text-align:left;
padding:4px;
background-color:#FFFFFF;
background-image:none;
border-width:0;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
font:11px Arial;
color:#000;
text-decoration:none;
}
ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{
background-color:#b7ddf2;
border-color:#C0C0C0;
border-style:solid;
color:#000000;
text-decoration:none;
text-shadow:#FFF 0 0 1px;
background-position:0 100px;
}
ul#css3menu1 img{
border:none;
vertical-align:middle;
margin-right:10px;
}
ul#css3menu1 img.over{
display:none;
}
ul#css3menu1 li:hover > a img.def{
display:none;
}
ul#css3menu1 li:hover > a img.over{
display:inline;
}
ul#css3menu1 li a.pressed img.over{
display:inline;
}
ul#css3menu1 li a.pressed img.def{
display:none;
}
ul#css3menu1 span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
background-color:#b7ddf2;
background-position:0 100px;
border-style:solid;
border-color:#C0C0C0;
color:#000000;
text-decoration:none;
text-shadow:#FFF 0 0 1px;
}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
background-color:#FFFFFF;
background-image:none;
color:#868686;
text-decoration:none;
}
ul#css3menu1 li.topfirst>a{
border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
}
ul#css3menu1 li.toplast>a{
border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
-webkit-border-radius:0;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
}
/* --------- End of Menu --------- */
EDIT1: I included the script and stylesheet.
EDIT2: Please look at the picture. It should clarify the issue.

The problem is in this line:
$active = $links.first().addClass('active');
It takes the first link in your menu and makes it active. Your first <a> tag in the ul with class menu is not the first menu item, but:
<a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
So you need to make sure you target the first menu item. You can for example assign an id to it:
<li>SUBMENU11</li>
and then you have to rewrite that line of javascript to:
$active = $('#submenu-default').addClass('active');
That should do the trick. Obviously you can use any other way to locate that link.
EDIT: Maybe even better solution would be to rewrite your html as follows:
<ul id="css3menu1">
<li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
<ul class="menu">
<li>SUBMENU11</li>
<li>SUBMENU12</li>
<li>SUBMENU13</li>
<li>SUBMENU14</li>
</ul></li>
<li class="menu"><img src="menu_files/css3menu1/schedule.png"/>MENU2</li>
<li class="menu"><img src="menu_files/css3menu1/analysis.png"/>MENU3</li>
<li class="toplast"><img src="menu_files/css3menu1/gps.png"/>MENU4</li>
</ul>
This way you don't have to change the javascript, as the first link in the menu now indeed is the first item of the menu. I leave it for you to find out what works best for you.

I guess you want something like this: http://www.cssmenus.co.uk/dropdown.html
If you show an example or drawing we could help you even better.