Freitag, 30. Oktober 2015

Hamburger Menu selber machen

Nein, es geht nichts ums essen. Gemeint sind die responsive Menus, die meist aus drei Strichen übereinander bestehen, die etwas an einen Hamburger erinnern.

Demnächst muss ich mich intensiver damit beschäftigen und habe schon mal ein paar Links herausgesucht.

Menü mit JQuery

Menü nur auf CSS3 basierend
Demnächst wird es hierzu mehr auf it-zeugs.de geben. 

Schon mal vorab: Das Hamburger Icon lässt sich übrigens ganz einfach mit etwas HTML und CSS basteln:


<html lang="de">
   <head>
      <title></title>
      <meta charset="utf-8" />
      <link rel="stylesheet" href="p.css" type="text/css" media="screen" />
   </head>
   <body>
    <div id="hamburger">
            <div></div>
            <div></div>
            <div></div>
        </div>
   </body>
</html>

p.css

#hamburger {
    border: 1px solid black;
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
    display: block;
    height: 25px;
    padding: 3px 3px 3px;
    position: relative;
    width: 25px;
    background: red;
}


#hamburger div {
    background-color: white;
    border: 1px solid white;
    border-radius: 2px 2px 2px 2px;
    height: 2px;
    margin-top: 3px;
    width: 90%;
}

Unter Responsive Site Designer | CoffeeCup Software  gibt es ein Site Designer, der die Erstellung von Responsive Designs ermöglicht.

Keine Kommentare:

Kommentar veröffentlichen