menu i css

henrik_t7 · Indlæg af **henrik_t7** » 28. jul 2014, 21:29

Hej.
Hvordan laver man en menu, hvor der er 8 punkter se tegning.

knap 1 knap 5
knap 2 knap 6
knap 3 knap 7
knap 4 knap 8

Helle menuen er 400 px bred, så hver knap er 200 px bred.

Kode: Vælg alt

   <nav >
		   <ul >
                <li><a href="">Knap 1</a></li>
		<li><a href="">knap 2</a></li>
		<li><a href="">knap 3</a></li>
		<li><a href="">knap 4</a></li>
		<li><a href="">knap 5</a></li>
                <li><a href="">knap 6</a></li>
                <li><a href="">knap 7</a></li>
                <li><a href="">knap 8</a></li>
           </ul>

          </nav>

TAK Hilsen Henrik

Indlæg af **cristian** » 28. jul 2014, 23:10

Hej Henrik.

Er der en bestemt grund til at du har valgt netop det design?
I stedet for en vertikal eller horisontal menu strakt ud i et.

Vh
Cristian

henrik_t7 · Indlæg af **henrik_t7** » 31. jul 2014, 23:11

Hej cristian,

Grunden til at jeg har denne design, er at jeg prøver at lave en hjemme side til en mobil tlf og der for denne design.
Jeg har 8 knapper og jeg syntes at de er for brede hvis de står vertikal, så der for 2 knapper ved side af hinanden.

VH Henrik

Indlæg af **cristian** » 1. aug 2014, 08:57

henrik_t7 skrev:Hej cristian,

Grunden til at jeg har denne design, er at jeg prøver at lave en hjemme side til en mobil tlf og der for denne design.
Jeg har 8 knapper og jeg syntes at de er for brede hvis de står vertikal, så der for 2 knapper ved side af hinanden.

VH Henrik

Hej Henrik
Selvom at du laver sådanne et design så får du ekstremt lidt plads. Jeg ville foreslå dig at lave en "rigtig" mobil menu i stedet.
Og tror ikke du ville blive så glad for det du prøver her på igen.

http://lmgtfy.com/?q=mobile+menu

henrik_t7 · Indlæg af **henrik_t7** » 1. aug 2014, 15:48

Hej cristian.

Super, se på det og vender tilbage.
God weenkend

Henrik

henrik_t7 · Indlæg af **henrik_t7** » 3. aug 2014, 12:33

Hej igen.

Har se på det, rettede lidt farver så den er til passede den side jeg laver.
Men jeg kan ikke få hover til at vise samme farve, når den er i lille menu. Virker fint i stor menu, hvor menuen står inline.
se html kode her:

Kode: Vælg alt

<!DOCTYPE html>
<html>
<head>
<title>Responsive Mobile Menu</title>
<link rel="stylesheet" href="css/responsivemobilemenu.css" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="rmm-js/responsivemobilemenu.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
</head>
<body>
        <div class="rmm">
            <ul>
                 <li><a href="">Forside</a></li>
				<li><a href="pris.html">Priser/Klinik</a></li>
				<li><a href="uddyb.html">Uddybning</a></li>
				<li><a href="reaktioner.html">Reaktioner</a></li>
				<li><a href="kosttilskud.html">Kosttilskud</a></li>
                <li><a href="rygestop.html">Rygestop</a></li>
                <li><a href="profil.html">Profil</a></li>
                <li><a href="kontakt.html">Kontakt</a></li>
            </ul>
        </div>
</body>
</html>

og ccs kode her

Kode: Vælg alt

/*

Responsive Mobile Menu v1.0
Plugin URI: responsivemobilemenu.com

Author: Sergio Vitov
Author URI: http://xmacros.com

License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/

*/

.rmm {
	display:block;
	position:relative;
	width:100%;
	padding:0px;
	margin:0 auto !important;
	text-align: center;
	line-height:19px !important;
}
.rmm * {
	-webkit-tap-highlight-color:transparent !important;
	font-family:Arial;
}
.rmm a {
	color:#FFFFFF;
	text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
	margin:0px;
	padding:0px;
}
.rmm ul {
	display:block;
	width:auto !important;
	margin:0 auto !important;
	overflow:hidden;
	list-style:none;

}


/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
	display:none !important;
	height:0px !important;
	width:0px !important;
}
/* */


.rmm .rmm-main-list li {
	display:inline;
	padding:padding:0px;
	margin:0px !important;
}
.rmm-toggled {
	display:none;
	width:100%;
	position:relative;
	overflow:hidden;
	margin:0 auto !important;
}
.rmm-button:hover {
	cursor:pointer;
}
.rmm .rmm-toggled ul {
	display:none;
	margin:0px !important;
	padding:0px !important;
}
.rmm .rmm-toggled ul li {
	display:block;
	margin:0 auto !important;
}




/* GRAPHITE STYLE */

.rmm.graphite .rmm-main-list li a {
	display:inline-block;
	padding:8px 30px 8px 30px;
	margin:0px -3px 0px -3px;
	font-size:15px;
	text-shadow:1px 1px 1px #333333;
	background-color:purple;
	border-left:1px solid #FFFFFF;

}
.rmm.graphite .rmm-main-list li a:hover {
   background-color:#ff3300;
}
.rmm.graphite .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rmm.graphite .rmm-main-list li:last-child a {
	-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.rmm.graphite .rmm-toggled {
	width:95%;
	background-color:#DB00DB;
	min-height:36px;
	border-radius:6px;
}


.rmm.graphite .rmm-toggled-controls {
	display:block;
	height:36px;
	color:white;
	text-align:left;
	position:relative;
   	border-radius:6px;
}
.rmm.graphite .rmm-toggled-title {
	position:relative;
	top:9px;
	left:15px;
	font-size:16px;
	color:white;
	text-shadow:1px 1px 1px black;
}
.rmm.graphite .rmm-button {
	display:block;
	position:absolute;
	right:15px;
	top:8px;
}

.rmm.graphite .rmm-button span {
	display:block;
	margin-top:4px;
	height:2px;
	background:white;
	width:24px;
}
.rmm.graphite .rmm-toggled ul li a {
	display:block;
	width:100%;
	background-color:purple;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #333333;
	border-top:1px solid #777777;
	text-shadow:1px 1px 1px #333333;
}
.rmm.graphite .rmm-toggled ul li a:active {
	background-color:#444444;
	border-bottom:1px solid #444444;
	border-top:1px solid #444444;
}



/* SAPPHIRE STYLE */

.rmm.sapphire .rmm-main-list li a {
	display:inline-block;
	padding:8px 30px 8px 30px;
	margin:0px -3px 0px -3px;
	font-size:15px;
	text-shadow:1px 1px 1px #3e587b;
	background-color:purple;
	border-left:1px solid #3e587b;

}
.rmm.sapphire .rmm-main-list li a:hover {
	background:#ff3300;
}
.rmm.sapphire .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.rmm.sapphire .rmm-main-list li:last-child a {
	-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.rmm.sapphire .rmm-toggled {
	width:95%;
	background-color:#ff3300;
	min-height:36px;
	border-radius:6px;
}
.rmm.sapphire .rmm-toggled-controls {
	display:block;
	height:36px;
	color:white;
	text-align:left;
	position:relative;
	border-radius:5px;
}
.rmm.sapphire .rmm-toggled-title {
	position:relative;
	top:9px;
	left:15px;
	font-size:16px;
	color:white;
	text-shadow:1px 1px 1px #3e587b;
}
.rmm.sapphire .rmm-button {
	display:block;
	position:absolute;
	right:9px;
	top:7px;
	width:20px;
	padding:0px 7px 0px 7px;
	border:1px solid #3e587b;
	border-radius:3px;

}

.rmm.sapphire .rmm-button span {
	display:block;
	margin:4px 0px 4px 0px;
	height:2px;
	background:purple;
	width:20px;
}
.rmm.sapphire .rmm-toggled ul li a {
	display:block;
	width:100%;
	background-color:purple;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #3c5779;
	border-top:1px solid #6883a6;
	text-shadow:1px 1px 1px #333333;
}
.rmm.sapphire .rmm-toggled ul li a:active {
	background-color:purple;
	border-bottom:1px solid #3c5779;
	border-top:1px solid #3c5779;
}
.rmm.sapphire .rmm-toggled ul li:first-child a {
	border-top:1px solid #3c5779 !important;
}





/* MINIMAL STYLE */

.rmm.minimal a {
	color:purple;
}
.rmm.minimal a:hover {
	opacity:0.7;
}
.rmm.minimal .rmm-main-list li a {
	display:inline-block;
	padding:8px 30px 8px 30px;
	margin:0px -3px 0px -3px;
	font-size:15px;
}
.rmm.minimal .rmm-toggled {
	width:95%;
	min-height:36px;
}
.rmm.minimal .rmm-toggled-controls {
	display:block;
	height:36px;
	color:purple;
	text-align:left;
	position:relative;
}
.rmm.minimal .rmm-toggled-title {
	position:relative;
	top:9px;
	left:9px;
	font-size:16px;
	color:#33333;
}
.rmm.minimal .rmm-button {
	display:block;
	position:absolute;
	right:9px;
	top:7px;
}

.rmm.minimal .rmm-button span {
	display:block;
	margin:4px 0px 4px 0px;
	height:2px;
	background:purple;
	width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
	display:block;
	width:100%;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #dedede;
	color:#FFFFFF;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
	border-top:1px solid #dedede;
}

Hilsen Henrik

Indlæg af **cristian** » 3. aug 2014, 14:10

Godt med menu i CSS koden skal jeg love for.

Har du et domæne hvor jeg / vi kan se siden i aktion?

Vh

henrik_t7 · Indlæg af **henrik_t7** » 3. aug 2014, 20:13

Hej.
Her er så en test mappe, se link http://www.danskspeedway.dk/test%20menu/demo.html

Håber at der er ok.
Henrik

Indlæg af **cristian** » 5. aug 2014, 10:33

Men jeg kan ikke få hover til at vise samme farve, når den er i lille menu. Virker fint i stor menu, hvor menuen står inline

Giver fint menint. En Phablet, Tablet og eller Smartphone har ikke en hover funktion(de kan ikke se stylingen)
så det er sikkert derfor menuen ikke indeholder en hover funktion hvis du har kopiret den.

Samtidig så ville jeg heller ikke tilføje en hover funktion til din menu i mobile view, da den aldrig ville blive brugt.

Vh
Cristian

henrik_t7 · Indlæg af **henrik_t7** » 15. aug 2014, 19:19

Hej Cristian.

Viste ikke at Tablet og Smartphone ikke har en hover funktion, men så ved jeg det.
Nu skal jeg så bare have resten af siden til at virke.

Hilsen Henrik

menu i css

Re: menu i css

Re: menu i css

Re: menu i css

Re: menu i css

Re: menu i css

Re: menu i css

Re: menu i css

Re: menu i css

Re: menu i css

Office

CMS

Webudvikling

Udvikling

Adobe

Andet

Online Markedsføring

App- og spiludvikling