<i class="icon-code"></i> Topbarmenu with search field ✤✤✤✤

So, mal wieder ein Blogger Tutorial. Diesmal möcht ich euch zeigen, wie ihr eine fixierte Menübar, inklusive Suchfeld gestalten könnt. Mit einem Dropdownmenü auf drei Ebenen.
Ich werde nicht spezifisch auf das Erstellen des Suchfelds eingehen, da ich dazu bereits einen Post geschrieben habe GCS without script-tag. Zum DropDown hab ich auch bereits einmal eine Anleitung geschrieben, allerdings gibt es heute eine Ebene mehr.
Und hier das Ergebnis des Tutorials:

Hi :)
Once again another blogger tutorial. Today I wanna show you how to write a fixed menu bar, including a search field, with a drop down menu with three layers.
I'm not gonna talk about how to create a search field, because I wrote already a tutorial about it GCS without script-tag, I also have a tut on drop downs, but today there's a lil more code with it.
And now what we're gonna make:

1. Drop Down HTML

Okay, die HTML des DropDowns ist nicht schwer. Wie immer sind es Listen, die wir ineinanderfügen. So schaut mein Menü ohne CSS einfach so aus.

Okay, the HTML of the DropDown is not difficult. As allways it is made out of lists, that are threaded. the menu without CSS added would look like this.

• Home
• About
  
  • KreaTief
  • F.A.Q.
• Archive
• Tutoriallists
  
  • Tutorials by level
    
    • ✤
    • ✤✤
    • ✤✤✤
    • ✤✤✤✤
    • ✤✤✤✤✤
  • Code
    
    • QuickTip
    • Blogger
    • HTML
    • CSS
    • JavaScript
  • Picture
    
    • Gimp
    • Photoshop
  • Food
  • Other
• Contact
• Follow
  
  • RSS
  • Bloglovin'
  • BlogConnect

die HTML für ein DropDown mit drei Ebenen schaut so aus:

that's what the HTML for a 3-level drop down looks like.

<ul>
 <li><a href='#'>Level 1</a></li>

 <li><a href='#'>Level 1</a>
  <ul>
   <li><a href='#'>Level 2</a></li>
   <li><a href='#'>Level 2</a></li>
  </ul>
 </li> 

 <li><a href='#'>Level 1</a>
  <ul>
   <li><a href='#'>Level 2</a></li>
   <li><a href='#'>Level 2</a>
    <ul>
     <li><a href='#'>Level 3</a></li>
     <li><a href='#'>Level 3</a></li>
     <li><a href='#'>Level 3</a></li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

Auf diese Weise baut ihr euer Menü zusammen.

That's how you wanna write your complete menu HTML

2. Full HTML

Okay, jetzt zur gesamten HTML. Es geht sicher noch professioneller, der Weg, den ich am einfachsten fand, um am Ende alles schön zusammenzusetzen ist mit drei Div-Containern, wobei der erste die Bar darstellt, darüber legen wir dann Menü und Searchbar.

Als erstes haben wir den Bar-Container, in den packen wir die anderen beiden.

Okay, now for the full HTML. There surely are more professional ways to do this, but I found it easiest to put each component in a div-container and then just assemble them in the end.

First we have the bar-container, in which we put the other two.

<div id="topmenubar">
 <div id="nav1">
   <!-- Menu HTML -->
 </div>
 <div id="searchwrap">
  <!-- Searchfield HTML -->
 </div>
</div>

Nun zur HTML des Suchfelds. Ich hab die Version des Tutorials verwendet, hab allerdings den button komplett entfernt und einen Platzhalter hinzugefügt.

For the search field I used the version shown in my tutorial, but I just left the button out and added a placeholder to make sure the searchfield will be recognized.

<div id="topmenubar">
 <div id="nav1">
   <!-- Menu HTML -->
 </div>
 <div id="searchwrap">
  <form action='http://www.google.co.uk/cse' id='cse-search-box'>
   <input name='cx' type='hidden' value='014092313708849156193:r0xlcl-xk10'/>
   <input name='cof' type='hidden' value='UTF-8'/>
   <input id='q' name='q' type='text' placeholder="search"/>
  </form>
 </div>
</div>

Und das ist alles für's Markup. Machen wir ein Menü dras.

Und so schaut unser Menü momentan aus:

And that's all for the markup. Let's make it into a menu.
Our menu currently looks like that:

3. Drop Down CSS

Die CSS für's DropDown ist relativ ähnlich wie die für ein normales DropDown, nur etwas länger. Es ist ziemlich viel, ich werd jetzt nicht jede Zeile erklären, wer's nicht versteht und gerne verstehen will, darf einen Kommentar da lassen und ich hol das noch nach.

CSS for this drop down is practicaly the same as the two-level one just with some more lines. There's quite a lot, so I'm not gonna explain every line. Who doesn't understand and wants to can write a comment and I'm gonna do the explaining.

#nav1 {
    width: 100%;
    background: transparent;
    height: 30px;
    margin: 0;
    position: relative;
    z-index: 10;
}

#nav1 ul {
 display: inline-block;
 margin: 0;        
 padding: 0;        
 list-style: none;        
 white-space: nowrap;        
 text-align: left;
}

#nav1 li {        
 margin: 0;        
 padding: 0;        
 list-style: none;        
 clear: both;        
 float: none;    
}

#nav1 a { /* styling links */       
 display: block;        
 line-height: 25px;        
 text-decoration: none;        
 padding: 5px 15px 5px 15px;         
 outline: none;        
 font-size: 13.5px;
 color: #444;
 text-decoration: none;
 letter-spacing: 2px;
}   

#nav1 ul ul {        
 position: absolute;        
 left: -9999px;        
 display: block;    
}

#nav1 ul > li {        
 float: left;        
 display: block;        
 position: relative;        
 clear: none;
}

#nav1 ul ul > li {        
 display: block;        
 float: none;
}

#nav1 ul ul li:hover > ul {        
 visibility: visible;        
 left: 100%;        
 top: auto;        
 margin-top: -30px;        
 display: block;    
}

#nav1 ul ul li:hover > ul li { 
 float: left 
}

#nav1 ul { 
 background: transparent; 
}

#nav1 ul ul { 
 background: #E3E3E3; /* Drop Background */
}

#nav1 ul li:hover > ul {            
 visibility: visible;            
 left: 0;            
 top: 30px;
}

#nav1 li:hover > a,
#nav1 ul li:hover > a { /* link hovering style */
 letter-spacing: 3px;
 font-variant: small-caps;
 color: rgba(118, 130, 194, 1);        
 display: block;
}

#nav1 li a { 
border: none; 
}

#nav1 ul,
.tabs-outer { 
 overflow: visible 
}

.main-outer { 
 z-index: 9 
}

.tabs-outer { 
 z-index: 10 
}

Nachdem diese CSS drin ist, schaut unser Menü so aus:

After adding this CSS, our menu looks like this:

4. Searchfield CSS

Als nächstes kommen wir zum Suchfeld. Das platzieren wir rechts, fügen ein paar Farben hinzu, etc.

Next we're styling the searchfield. We place it on the right, add some color etc.

#searchwrap{        
 position: relative;        
 right: 40px;        
 height: 30px;        
 width: 300px;         
 top: 0px !important;         
 z-index: 10;        
 float:right;      
}
      
#q{
 height: 25px;
 width: 300px;
 background: #D4D4D4;
 border: none;
 color: #444;
 padding: 5px; 
    font-family: comfortaa;
    font-size: 13.5px;
 letter-spacing: 2px;    
    position: fixed;
    top: 2px;
    right: 5px;
    z-index: 10;
}

#q:focus{
 -webkit-box-shadow:  0px 0px 0px 0px transparent !important;
 box-shadow:  0px 0px 0px 0px transparent !important;
}

#q:focus{
 background: rgba(118, 130, 194, 0.5);
}

#q::-webkit-input-placeholder{
 opacity:1; 
 color: #444;
}

#q:-moz-placeholder{
 opacity: 1; 
 color: #444;
}

#q::-moz-placeholder {
 opacity: 1; 
 color: #444;
}

#q:-ms-input-placeholder { 
 opacity: 1;  
 color: #444;
}

Unser Menu schaut so aus:

Our menu looks like this:

5. Bar CSS

Zum Schluss kommt jetzt die CSS der Bar. Ich hab einen Schatten hinzugefügt, der uns den Effekt der drüberliegens gibt, ansonsten ist es ziemlich simpel, einfach eine Bar in der Farbe unserer Wahl.

To finish it up the CSS of the bar. I added a lil shadow underneath to give us the effect of really being on top of the page. Otherwise the CSS is pretty simple, just a bar in our desired color.

#topmenubar{
 z-index: 5;
 width: 100%;
 background: #E3E3E3;
 height: 39px;
 position: fixed;
 top: 0px;
 left: 0;
 -webkit-box-shadow:  0px 1.5px 1.5px 0.5px rgba(0, 0, 0, .3);
 box-shadow:  0px 1.5px 1.5px 0.5px rgba(0, 0, 0, .3);
 color: #aaa;
    font-family: Comfortaa;
}

Und das ist es schon. Ihr könnt jetzt natürlich noch weiter daran rumbasteln. Kleine Symbole hinzufügen, oder Pfeile um zu markieren, dass es weitergeht, wie ich es hier z.B. gemacht habe.

And that's it. Of course you can play with it now, add symbols or triangles, like I did here

6. Adding to the blog

Okay, wie fügt ihr das ein?
Als erstes müsst ihr ins HTML eures Blogs gehen.

Dann sucht ihr nach

How to add into your blog. First you have to edit your HTML

Then search for

<div class='content-outer'>

Darüber fügt ihr die HTML eures Menüs ein.

Above that, you paste the HTML of your menu



Für die CSS sucht ihr nach

For the CSS you search for

]]></b:skin>

Und wieder oben drüber einfügen.

And paste it above that