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 */
.topnav {
padding: 2px 125px;
background: linear-gradient(to bottom, lightgrey, white);
overflow: hidden;
border: 1px solid lightgrey;
}
.topnav ul, .topnav li {
list-style: none;
}
.topnav ul {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-start;
}
.topnav li {
margin: 5px;
.topnav .wambo { /* der bereich der den content hält : brauchen wir für die flexbox*/
display: flex;
}
.pic{
display: block;
.topnav .pic-wrapper, .topnav a {
height: 75px;
line-height: 75px;
}
.pic:hover {
transform: translateY(-80px);
/* geht auch ohne .topnav .pic-wrapper {
overflow: hidden;
}*/
.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-size: 14px;
border-left: 1px solid lightgrey;
}
.icon:hover {
background: linear-gradient(to top, grey, white);
}
.lastBorder {
border-right: 1px solid lightgrey;
}
@ -56,7 +68,7 @@ h1 {
margin: 20px 0;
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 300;
}
.text {

12
index.html
View file

@ -11,17 +11,19 @@
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<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"
crossorigin="anonymous">
</head>
<body>
<nav class="topnav">
<ul>
<li class="pic">
<div class="page">
<div class="wambo">
<div class="pic-wrapper">
<img src="resources/world_data_logo_v1.png">
</li>
</div>
<ul>
<li class="icon">
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A1 - Table</a>
</li>
@ -41,6 +43,8 @@
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A4 - Vis</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="page">