• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

menu erstellen

S

svenmann

Guest
Hallo zusammen,
kann mir hier jemand helfen?
ich bin ein absoluter Anfänger in Sachen JavaScript
ich bin neulich über diese seite gestolpert
www.t3n.de

wenn man über einen bestimmten Punkt scrollt erscheint am oberen bildschirmrand eine menuleiste.

hat jemand ein Script dafür das wäre echt super!

Gruß Svenmann.
 
Sieht auch wie ein mousover mit einem aufschieben eines div. Sollte mit jQuery .animate() gehen. Aber so ganz ohne JS Kenntnisse ist das schwierig. Wäre denn jQuery bei dir vorhanden?
 
danke für deine schnelle Antwort
ne ich hab mich noch gar nicht mit JavaScript oder jQuery auseinander gesetzt...
ich dachte das es da vielleicht ein schon fertiges Script gibt bzw ein script das man nur anpassen muss...
 
hallo
ich habe mir die navigation soweit auf mein layout angepasst.
klappt alles soweit einwandfrei
jetzt habe ich nur noch eine frage...ist zwar der falsche Bereich aber vielleicht hat ja jemand eine idee

wie kann ich den code der suchleiste anpassen, dass der Balken nach links anstatt nach rechts aufgeht?

Mit freundlichen Grüßen
Svenmann
 
das ist der Code zu der Suchleiste.
ich habe die Suchleiste seperat in eine Ziele gesetzt.
Sie ist nicht mehr in der Navigationsleiste.

Code:
.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.nav a { text-decoration: none; }
.nav li { list-style: none; }
.nav {
    display: inline-block;
    position: relative;
    cursor: default;
    z-index: 500;
}
.nav > li {
    display: block;
    float: left;
}
.nav > li > a {
    position: relative;
    display: block;
    z-index: 510;
    height: 39px;
    padding: 0 20px;
    line-height: 40px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #fcfcfc;
    text-shadow: 0 0 1px rgba(0,0,0,.35);
 
    background: #372f2b;
    border-left: 1px solid #4b4441;
    border-right: 1px solid #312a27;
 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
.nav > li:hover > a { background: #4b4441; }
 
.nav > li:first-child > a {
    border-radius: 3px 0 0 3px;
    border-left: none;
}
.nav > li.nav-search > form {
    position: relative;
    width: inherit;
    height: 39px;
    z-index: 510;
}
.nav > li.nav-search input[type="text"] {
    display: block;
    float: left;
    width: 1px;
    height: 39px;
    padding: 15px 0;
    line-height: 24px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #999999;
    text-shadow: 0 0 1px rgba(0,0,0,.35);
 
    background: #372f2b;
 
    -webkit-transition: all .3s ease 1s;
    -moz-transition: all .3s ease 1s;
    -o-transition: all .3s ease 1s;
    -ms-transition: all .3s ease 1s;
    transition: all .3s ease 1s;
}
 
.nav > li.nav-search input[type="text"]:focus { color: #fff; }
 
.nav > li.nav-search input[type="text"]:focus,
.nav > li.nav-search:hover input[type="text"] {
    width: 110px;
    padding: 15px 20px;
 
    -webkit-transition: all .3s ease .1s;
    -moz-transition: all .3s ease .1s;
    -o-transition: all .3s ease .1s;
    -ms-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
}
.nav > li.nav-search input[type="submit"] {
    display: block;
    float: left;
    width: 20px;
    height: 39px;
    padding: 0 20px;
    cursor: pointer;
	
	background-image:url(../images/search/search.png);
 
    border-radius: 0 0 0 0;
 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
 
.nav > li.nav-search input[type="submit"]:hover { 
    background-image:url(../images/search/search-mouseover.png); 
}

Gruß Svenmann
 
Zurück
Oben