Responsive Top Bar Menu (with search field) ✤✤✤✤
Hallöchen :D
So, ich hab vor einer Weile ein 3-Level-Top-Bar-Menu vorgestellt ( hier). Allerdings war das nicht responsive. Und auch wenn ich es geliebt habe, musste ich für mein responsives Menü etwas anderes haben.
Ich habe Stunden damit zugebracht mir responsive Menüs anzusehen, obwohl die Antwort eigentlich nur eine Mail entfernt war. Wie schon so oft, hat mir Oliver die Antwort geliefert, als ich ihn gefragt habe, wie er denn sein responsives Menu gemacht hat.
Die Antwort hätte mir eigentlich klar sein sollen, ich vergess es nur einfach immer wieder. Die Antowrt nennt sich
Bootstrap Und wie Oliver's so schön gesagt hat: Es funktioniert wie ein Modellbaukasten. :D
Hey ya :D
A while ago I presented my 3-level-top-bar-menu ( here). And I loved it, but it had the simple problem, that it wasn't responsive. And since I wanted to have a responsive template I had to replace it.
I spent hours of internet research, trying to find a perfect responsive menu, although the answer was only an email away. Like many times before Oliver was the one to give me the answer. Since I really liked the way his responsive menu worked, I asked him and the answer was so easy. I should've thought about it before, because I love it, but I always keep forgetting about it. The answer is called
Bootstrap And how Oliver has put it so perfectyl: It works like a model kit.
Before we can start, we have to prep our blog. The menu has a height of 50px, those 50px have to be there at the top of our blog, if we want it fixed up there. If you don't want to place your menu there, you don't have to do this. But if you wanna have it fixed, you definitely need to disable the navbar. You should do this anyways since it has no purpose anymore and looks ugly. Luckily Google has realized that as well and we can disable it very easily in the layout section.
Ihr könnt das ganze Downloaden und dann hochladen und selbst hosten, oder aber ihr übernehmt die Bootstrap-Links und macht die Anpassungen dann spezifisch in dem Moment, in dem ihr sie gerade braucht.
Okay, wir gehen auf die Bootstrap Seite, zu "Getting Started" und finden dort die beiden Links.
Bootstrap really is a kit to built a website. It's a collection of css and javascript, which is very easy to implement in your blog. The classes are then ready to use. What you can do with 'em can be seen at the components page of bootstrap. What you can do is for you to find out, first we just want to add it to our blog. You could download it, adjust it, then host and link to it. Or you just take the links from bootstrap and just make the adjustments later on.
Okay, let's go to the bootstrap page and grab the links.
Die beiden Links haben wir, doch wo kommen sie hin?
Die CSS kommt in den head-Bereich. Ich hab sie oberhalb des Title hinzugefügt.
Wichtig beim einfügen ist, dass ihr den Link durch einen Slash erweitert, damit er "xhtml-tauglich" wird.
We have the links now, but where are they goin'?
The CSS is placed in the head-part. I added it above the title.
It's important to add a slash before closing the tag, so xhtml can read it.
Für das JavaScript müssen wir nach dem schliessenden head-Tag suchen und ausserdem auch noch JQuery hinzufügen, damit alles klappt.
For the javascriot we have to search for the closing head-tag and add jquery as well, in order for everything to work
Okay, for the basic responsive navbar there's a code you can find at the components.
Nehmt euch dieses Code und kopiert ihn irgendwo hin. Ich hab alles in meinen Editor kopiert.
Take this code and paste it somewhere. I put it in my editor.
Okay, now it's easy. You build your menu. The menu has different parts to it. You take what you like and leave out what you don't.
Die drei Punkte, sind die Stelle, an der ihr euer Menü platziert und das Suchfeld, wenn ihr eins haben wollt. Das ist der Ort, an dem der Inhalt für das Menu ist, das dann bei kleiner Bildgrösse aufgeklappt wird. Also der Teil, der unter dem Button versteckt ist.
In diesem Code ist ein "Brand" enthalten, das heisst ihr könnt euren Blogtitel in der Bar anzeigen, da ich diesen nicht haben wollte, habe ich ihn direkt entfernt. Oben hab ich ihn einfach auskommentiert, damit ihr noch immer den Basis-Code habt.
Die einzelnen Bauteile findet ihr alle auf der Bootstrap-Seite, aber ich werde sie euch trotzdem kurz zeigen, sonst hab ich ja gar nichts mehr zutun. :D
The three dots show you where you paste your menu (and the searchfield, if you want to). That's the container that will be hidden behind the button, as soon as the screen size ist smaller than 769px.
In this code a brand is included, for you to showcase your title. Since I did not want that, I took it out. Above I did just comment it out so you can still see the basic code.
You can find every element on the site, but I'm still gonna show them to ya, otherwise I had nothing to do :D
A simple menu item ist really easy. Just a list element with a link
A dropdown is a lil more complex. First you need a non-working link and then there's a list insive. If you want divider and headings like I have one iat the tutorial lists, that's what you have to do.
Once Again I give you the link for my search field tutorial Google Cutom Search Field So U know what a GoogleSearchID is. :D To include the searchfield the code looks like this (I aligned mine on the right, by adding the class "pull-right" if you don't want that, just take it out again.)
Mein Menu sieht so aus.
And then it just has to be put together.
That's what my menu looks like.
Geht ins HTML eures Blogs und sucht nach
To have your menu fixed at the top of your blog, go to your HTML and search for
Oberhalb davon kommt eure Navbar hin, die ihr um eine Klasse erweitert habt. "navbar-fixed-top"
Above of that you paste your code, to which you added an extra class "navbar-fixed-top"
Speichern und angucken.
Save and have a look at it.
Sucht nach
As you can see, the search field is a lil bit to high, so we have to add a little extra CSS.
Search for
Und oberhalb davon:
Und dann war's das auch schon :D
And that's it!
So, ich hab vor einer Weile ein 3-Level-Top-Bar-Menu vorgestellt ( hier). Allerdings war das nicht responsive. Und auch wenn ich es geliebt habe, musste ich für mein responsives Menü etwas anderes haben.
Ich habe Stunden damit zugebracht mir responsive Menüs anzusehen, obwohl die Antwort eigentlich nur eine Mail entfernt war. Wie schon so oft, hat mir Oliver die Antwort geliefert, als ich ihn gefragt habe, wie er denn sein responsives Menu gemacht hat.
Die Antwort hätte mir eigentlich klar sein sollen, ich vergess es nur einfach immer wieder. Die Antowrt nennt sich
Hey ya :D
A while ago I presented my 3-level-top-bar-menu ( here). And I loved it, but it had the simple problem, that it wasn't responsive. And since I wanted to have a responsive template I had to replace it.
I spent hours of internet research, trying to find a perfect responsive menu, although the answer was only an email away. Like many times before Oliver was the one to give me the answer. Since I really liked the way his responsive menu worked, I asked him and the answer was so easy. I should've thought about it before, because I love it, but I always keep forgetting about it. The answer is called
Preparation
Bevor wir damit anfangen, müssen wir unseren Blog vorbereiten. Das Menü hat eine Höhe von 50px, diese 50px müssen wir freimachen, wenn wir das Menü fixiert haben wollen. Wollt ihr das Menü bspweise unterhalb eures Headers, dann braucht ihr das nicht zu tun. Da ich meins allerdings oben haben will, muss als erstes die Navbar weg. Die meisten haben das sicher schon, denn einen Zweck erfüllt dieses doofe Ding schon lange nicht merh. Und zum Glück hat das Google mittlerweile auch kapiert, denn wir können ganz einfach das Gadget ausschalten. Dazu ins Layout und die Navbar bearbeiten.Before we can start, we have to prep our blog. The menu has a height of 50px, those 50px have to be there at the top of our blog, if we want it fixed up there. If you don't want to place your menu there, you don't have to do this. But if you wanna have it fixed, you definitely need to disable the navbar. You should do this anyways since it has no purpose anymore and looks ugly. Luckily Google has realized that as well and we can disable it very easily in the layout section.
Add Bootstrap to Blog
Bootstrap ist wirklich so etwas wie ein Modellbaukasten. Es ist eine Sammlung von CSS und JavaScript, die sich ganz leicht in den Blog einbinden lassen. Die Klassen lassen sich dann ganz einfach verwenden. Was man alles damit machen kann, könnte ihr auf der Components-Seite von Bootstrap sehen. Doch darum soll es jetzt nicht gehen, das könnt ihr dann alles selbst erforschen. Zuerst müssen wir das Ganze überhaupt in unseren Blog einbauen.Ihr könnt das ganze Downloaden und dann hochladen und selbst hosten, oder aber ihr übernehmt die Bootstrap-Links und macht die Anpassungen dann spezifisch in dem Moment, in dem ihr sie gerade braucht.
Okay, wir gehen auf die Bootstrap Seite, zu "Getting Started" und finden dort die beiden Links.
Bootstrap really is a kit to built a website. It's a collection of css and javascript, which is very easy to implement in your blog. The classes are then ready to use. What you can do with 'em can be seen at the components page of bootstrap. What you can do is for you to find out, first we just want to add it to our blog. You could download it, adjust it, then host and link to it. Or you just take the links from bootstrap and just make the adjustments later on.
Okay, let's go to the bootstrap page and grab the links.
Die beiden Links haben wir, doch wo kommen sie hin?
Die CSS kommt in den head-Bereich. Ich hab sie oberhalb des Title hinzugefügt.
Wichtig beim einfügen ist, dass ihr den Link durch einen Slash erweitert, damit er "xhtml-tauglich" wird.
We have the links now, but where are they goin'?
The CSS is placed in the head-part. I added it above the title.
It's important to add a slash before closing the tag, so xhtml can read it.
Für das JavaScript müssen wir nach dem schliessenden head-Tag suchen und ausserdem auch noch JQuery hinzufügen, damit alles klappt.
For the javascriot we have to search for the closing head-tag and add jquery as well, in order for everything to work
<!-- JQuery -->
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
<!-- Bootstrap JavaScript -->
<script src='//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js'/>
Grab Basic Code
Okay, für die responsive Navbar, gibt es einen Code, den ihr unter den Components findet.Okay, for the basic responsive navbar there's a code you can find at the components.
Nehmt euch dieses Code und kopiert ihn irgendwo hin. Ich hab alles in meinen Editor kopiert.
Take this code and paste it somewhere. I put it in my editor.
Build your Menu
Okay, jetzt ist es relativ einfach. Ihr baut euer Menü zusammen. Das Menu besteht aus einzelnen Bauteilen. Ihr könnt das, was ihr nicht wollt entfernen und das, was euch gefällt behalten.Okay, now it's easy. You build your menu. The menu has different parts to it. You take what you like and leave out what you don't.
<div class="navbar">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Be sure to leave the brand out there if you want it shown -->
<!-- <a class="navbar-brand" href="#">Title</a> DELETED -->
<!-- Place everything within .navbar-collapse to hide it until above 768px -->
<div class="nav-collapse collapse navbar-responsive-collapse">
... <!-- HERE COMES MENU (& search field) -->
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->Die drei Punkte, sind die Stelle, an der ihr euer Menü platziert und das Suchfeld, wenn ihr eins haben wollt. Das ist der Ort, an dem der Inhalt für das Menu ist, das dann bei kleiner Bildgrösse aufgeklappt wird. Also der Teil, der unter dem Button versteckt ist.
In diesem Code ist ein "Brand" enthalten, das heisst ihr könnt euren Blogtitel in der Bar anzeigen, da ich diesen nicht haben wollte, habe ich ihn direkt entfernt. Oben hab ich ihn einfach auskommentiert, damit ihr noch immer den Basis-Code habt.
Die einzelnen Bauteile findet ihr alle auf der Bootstrap-Seite, aber ich werde sie euch trotzdem kurz zeigen, sonst hab ich ja gar nichts mehr zutun. :D
The three dots show you where you paste your menu (and the searchfield, if you want to). That's the container that will be hidden behind the button, as soon as the screen size ist smaller than 769px.
In this code a brand is included, for you to showcase your title. Since I did not want that, I took it out. Above I did just comment it out so you can still see the basic code.
You can find every element on the site, but I'm still gonna show them to ya, otherwise I had nothing to do :D
Normal List Element
Einfach nur ein Menüpunkt ist ganz einfach. Dafür einfach ein Listenelement mit Link platzieren:A simple menu item ist really easy. Just a list element with a link
<li><a href='#'>Menu Item</a></li>
<li><a href='http://bekreatief.blogspot.com'>Home</a></li>DropDown Element
Ein DropDown ist schon etwas komplexer. Zu Beginn braucht ihr einen nicht-funktionierenden link, und dan einfach eine Liste darin. Wenn ihr wie ich bei den Tutorials noch einen divider und ein heading haben wollt, schaut das so aus.A dropdown is a lil more complex. First you need a non-working link and then there's a list insive. If you want divider and headings like I have one iat the tutorial lists, that's what you have to do.
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Menu Item <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Drop Item</a></li>
<li class='divider'/> <!-- DIVIDER -->
<li class='dropdown-header'>Drop Heading</li>
<li><a href='#'>Drop Item</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Tutoriallists <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bekreatief.blogspot.ch/p/code.html'>Code</a></li>
<li><a href='http://bekreatief.blogspot.ch/p/picture.html'>Picture</a></li>
<li><a href='http://bekreatief.blogspot.com/p/food.html'>Food</a></li>
<li><a href='http://bekreatief.blogspot.ch/p/diy_28.html'>DIY</a></li>
<li><a href='http://bekreatief.blogspot.com/p/other.html'>Other</a></li>
<li class='divider'/>
<li class='dropdown-header'>Tutorials By Level</li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4?max-results=5'>✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4?max-results=5'>✤✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=5'>✤✤✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=5'>✤✤✤✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=5'>✤✤✤✤✤</a></li>
</ul>
</li>SearchField
Hier verweise ich mal wieder auf mein Tutorial zu den Suchfeldern. Google Cutom Search Field Ihr wisst also was eine GoogleSearchID ist. :D Um das Suchfeld einzubauen, schaut's so aus. (Ich hab meins noch mit der klasse "pull-right" nach rechts verschoben, wenn ihr das nicht wollt, einfach die Klasse entfernen.)Once Again I give you the link for my search field tutorial Google Cutom Search Field So U know what a GoogleSearchID is. :D To include the searchfield the code looks like this (I aligned mine on the right, by adding the class "pull-right" if you don't want that, just take it out again.)
<div class='pull-right navbar-search'>
<form action='http://www.google.co.uk/cse' id='cse-search-box'>
<input name='cx' type='hidden' value='GoogleCustomSearchID'/>
<input name='cof' type='hidden' value='UTF-8'/>
<input class='form-control search-query span3' id='q' name='q' placeholder='PLACEHOLDERTEXT' type='text'/>
</form>
</div>
<div class='pull-right navbar-search'>
<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 class='form-control search-query span3' id='q' name='q' placeholder='Search' type='text'/>
</form>
</div>Put Together
Und dann muss das alles nur noch zusammengesetzt werden.Mein Menu sieht so aus.
And then it just has to be put together.
That's what my menu looks like.
<div class='navbar'>
<div class='container'>
<button class='navbar-toggle pull-left' data-target='.navbar-responsive-collapse' data-toggle='collapse' style='z-index: 25; border:0;' type='button'>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<div class='nav-collapse collapse navbar-responsive-collapse'>
<ul class='nav navbar-nav'>
<li><a href='http://bekreatief.blogspot.com'>Home</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>About <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bekreatief.blogspot.com/p/kreatief.html'>KreaTief</a></li>
<li><a href='http://bekreatief.blogspot.com/2013/05/faq.html'>F.A.Q.</a></li>
</ul>
</li>
<li><a href='http://bekreatief.blogspot.com/p/archiv_7.html'>Archive</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Tutoriallists <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bekreatief.blogspot.ch/p/code.html'>Code</a></li>
<li><a href='http://bekreatief.blogspot.ch/p/picture.html'>Picture</a></li>
<li><a href='http://bekreatief.blogspot.com/p/food.html'>Food</a></li>
<li><a href='http://bekreatief.blogspot.ch/p/diy_28.html'>DIY</a></li>
<li><a href='http://bekreatief.blogspot.com/p/other.html'>Other</a></li>
<li class='divider'/>
<li class='dropdown-header'>Tutorials By Level</li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4?max-results=5'>✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4?max-results=5'>✤✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=5'>✤✤✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=5'>✤✤✤✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=5'>✤✤✤✤✤</a></li>
</ul>
</li>
<li><a href='http://bekreatief.blogspot.com/p/contact_23.html'>Contact</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Follow <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bekreatief.blogspot.ch/feeds/posts/default'>RSS</a></li>
<li><a href='http://www.bloglovin.com/en/blog/3645972'>Bloglovin'</a></li>
<li><a href='http://blog-connect.com/a?id=1589905134039127183'>Blogconnect</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Find Me <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://www.hierschreibenwir.de/user/12356/'>HSW</a></li>
<li><a href='http://myriamfrisano.blogspot.ch/'>Wortgefängnisarchitektur</a></li>
</ul>
</li>
</ul>
<div class='pull-right navbar-search'>
<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 class='form-control search-query span3' id='q' name='q' placeholder='Search' type='text'/>
</form>
</div><!-- /search container -->
</div> <!-- /.nav-collapse -->
</div> <!-- /.container -->
</div> <!-- /.navbar --> Add to Blog
Um euer Menü oben fixiert zu haben, tut ihr folgendes.Geht ins HTML eures Blogs und sucht nach
To have your menu fixed at the top of your blog, go to your HTML and search for
<div class='content-outer'>Oberhalb davon kommt eure Navbar hin, die ihr um eine Klasse erweitert habt. "navbar-fixed-top"
Above of that you paste your code, to which you added an extra class "navbar-fixed-top"
Speichern und angucken.
Save and have a look at it.
Finishing Touches
Wie ihr sehen könnt, ist das Suchfeld noch etwas zu hoch. Dafür müssen wir die CSS ein kleines bisschen anpassen.Sucht nach
As you can see, the search field is a lil bit to high, so we have to add a little extra CSS.
Search for
]]></b:skin>Und oberhalb davon:
.navbar-search {
margin-top: 6px;
}Und dann war's das auch schon :D
And that's it!
Labels:
✤✤✤✤,
Blogger,
bootstrap,
Design,
Drop Down,
google custom search,
menu,
responsive,
Tutorial
edit
4 comments:
Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+
Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered
Schöne Idee. Ich hab ein Problem: Der erscheinende Button ist nicht "klickbar". wie kann man das ändern? http://richtigesblogdesign.blogspot.de/
ReplyDeleteUnd kann man die Links direkt an den Rand des Blog schieben? Diese sind nämlich leider ein bisschen zu weit entfernt von dem Rand.
Ich versteh nich ganz, was du nicht klicken kannst. Auf dem Testblog seh ich das Menü nicht.
ReplyDeleteHab das mit dem Button hinbekommen. Jetzt ist aber das Problem,dass die Links nicht untereinander sind sondern alle nebeneinander.
ReplyDeleteOkay, jetzt hab ich gesehen was du machst. Du gehst das ganze falsch an. Versuch nicht Bootstrap irgendwie in dein altes Menü zu pressen, sondern dein Menü in Bootstrap.
DeleteMach das ganze Menü neu, mit dem Bootstrap Code und dann kannst du es platzieren und einfärben, wie du willst. Aber nicht irgendwie ne Kombi, das kommt sonst seltsam raus.