Uni/WME
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Menü (Desktop) sieht aus wie in Vorlage

Browse source
This commit is contained in:
seli 2018-11-04 15:44:42 +01:00
parent 8b3f4a1b63
commit ce24b11d7a
2 changed files with 57 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
css/main.css
View file

@ -1,42 +1,54 @@
/* Add a black background color to the top navigation */ /* Add a black background color to the top navigation */
.topnav { .topnav {
padding: 2px 125px;
background: linear-gradient(to bottom, lightgrey, white); background: linear-gradient(to bottom, lightgrey, white);
overflow: hidden; overflow: hidden;
border: 1px solid lightgrey; border: 1px solid lightgrey;
} }
.topnav ul, .topnav li {
list-style: none;
}
.topnav ul { .topnav ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-end; align-items: flex-end;
justify-content: flex-start; justify-content: flex-start;
} }
.topnav li { .topnav .wambo { /* der bereich der den content hält : brauchen wir für die flexbox*/
margin: 5px; display: flex;
} }
.topnav .pic-wrapper, .topnav a {
.pic{
display: block;
height: 75px; height: 75px;
line-height: 75px;
} }
/* geht auch ohne .topnav .pic-wrapper {
.pic:hover { overflow: hidden;
transform: translateY(-80px); }*/
.topnav a {
display: block;
padding: 0px 15px;
transition: 0.5s all ease;
padding-top: 12px;
box-sizing: border-box;
} }
.topnav a:hover {
background: lightgrey;
.icon { }
padding: 16px; .topnav .pic-wrapper {
margin-right: 15px; /* abstand zu <ul> / links */
}
.topnav .pic-wrapper:hover img {
margin-top: -80px;
}
/* das <li> */
.topnav .icon {
display: block;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-size: 14px; font-size: 14px;
border-left: 1px solid lightgrey; border-left: 1px solid lightgrey;
} }
.icon:hover {
background: linear-gradient(to top, grey, white);
}
.lastBorder { .lastBorder {
border-right: 1px solid lightgrey; border-right: 1px solid lightgrey;
} }
@ -56,7 +68,7 @@ h1 {
margin: 20px 0; margin: 20px 0;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-size: 30px; font-size: 30px;
font-weight: 300;
} }
.text { .text {

52
index.html
View file

@ -11,36 +11,40 @@
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<script src="js/table.js"></script> <script src="js/table.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
crossorigin="anonymous"> crossorigin="anonymous">
</head> </head>
<body> <body>
<nav class="topnav"> <nav class="topnav">
<ul> <div class="page">
<li class="pic"> <div class="wambo">
<img src="resources/world_data_logo_v1.png"> <div class="pic-wrapper">
</li> <img src="resources/world_data_logo_v1.png">
<li class="icon"> </div>
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A1 - Table</a> <ul>
</li> <li class="icon">
<li class="icon"> <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A1 - Table</a>
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Parse</a> </li>
</li> <li class="icon">
<li class="icon"> <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Parse</a>
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Save</a> </li>
</li> <li class="icon">
<li class="icon"> <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Save</a>
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Print</a> </li>
</li> <li class="icon">
<li class="icon"> <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Print</a>
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A3 - REST</a> </li>
</li> <li class="icon">
<li class="icon lastBorder"> <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A3 - REST</a>
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A4 - Vis</a> </li>
</li> <li class="icon lastBorder">
</ul> <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A4 - Vis</a>
</li>
</ul>
</div>
</div>
</nav> </nav>
<div class="page"> <div class="page">