CSS drop line menu

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
sneaky
Δημοσιεύσεις: 18
Εγγραφή: 21 Νοέμ 2006 12:31

CSS drop line menu

Δημοσίευση από sneaky » 29 Οκτ 2009 23:13

Έχω φτιάξει το παρακάτω menu και θα ήθελα μια βοήθεια για να βάλω submenu αλλά με drop line δηλ. να βγαίνει άλλη μια γραμμή κάτω από το menu όπου έχει το βελάκι με τις υποκατηγορίες κεντραρισμένες στο κάθε menu - submenu.

Προσπάθησα προσθέτοντας κάποια ul li αλλά δεν! Εκτός ότι όταν πας εκεί που είναι το βελάκι και μπαίνει το hover το βελάκι εξαφανίζεται :think:

με το παρακάτω css το menu είναι έτσι:

Εικόνα

Κώδικας: Επιλογή όλων

#nav
{
	font: 16px Verdana, sans-serif;
	float: left;
	width: 100%;
	min-width: 1024px;
	background: url(../images/nav_bg.png) repeat-x;
}
	#nav ul
	{
		margin: 0;
		padding: 0 10px 0 15px;
		list-style: none;
	}
	
	#nav ul li
	{
		display: inline;
		margin: 0;
		padding: 0;
		float: left;
	}
	
	#nav ul li a 
	{
		line-height: 40px;
		padding: 10px 16px 20px 20px;
		color: #7b7a7a;
		outline: none;
		text-decoration: none;
	}
	
	#nav ul li a:hover
	{
		color: #494949;
		background: url(../images/menu_hover.png) repeat-x;
	}
	
	#nav ul li a.current
	{
		font-weight: bold;
		color: #606060;
		margin: 0;
		margin: 0 0 0 5px;
		padding: 10px 10px 26px 15px;
		background: url(../images/menu_hover.png) repeat-x;
	}

	#nav ul li a.current:hover
	{
		color: #666565;
	}

	
	
	#nav-search 
	{
		float: left;
		position: relative;
		top: 9px;
		left: 20px;
	}

		input.nav-text 
		{
			margin-right: 2px;
			font-size: 10px;
			padding: 3px;
			background: #f5f5f5;
			border: 1px solid #ccc;
			-moz-border-radius: 3px;
			-khtml-border-radius: 3px;	
			-webkit-border-radius: 3px;
			border-radius: 3px;
			height: 14px;
			vertical-align: top;
			color: #666;
			width: 110px;
		}
			#nav-img
			{			
				background: #f5f5f5 url(../images/icon_textbox_search.gif) no-repeat right center;
				padding-right: 27px;
			}
		
		.nav-button
		{
			font: normal 11px/16px "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
			border: 1px solid #bbb;
			color: #464646;
			cursor: pointer;
			padding: 2px 8px !important;
			-moz-border-radius: 11px;
			-khtml-border-radius: 11px;
			-webkit-border-radius: 11px;
		}

			.nav-button a
			{
				outline: none;
			}

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

CSS drop line menu

Δημοσίευση από sibas » 30 Οκτ 2009 08:18

για διάβασε μερικά από αυτά
http://www.tjkdesign.com/articles/dropdown/

sneaky
Δημοσιεύσεις: 18
Εγγραφή: 21 Νοέμ 2006 12:31

CSS drop line menu

Δημοσίευση από sneaky » 30 Οκτ 2009 21:52

Ευχαριστώ.

Το έκανα αλλά έχω κάποια θεματάκια που με προβληματίζουν..

Κώδικας: Επιλογή όλων

.nav 
{
	background: url(../images/nav_bg.png) repeat-x; 
	position: relative; 
	font: 16px Verdana, sans-serif;
	float: left;
	width: 100%;
	min-width: 1024px;
	z-index: 100;
}

	.nav li 
	{
		height: auto; 
		float: left;
	}
	
		.select li a.fly, .select .fly:hover
		{
			background: url(../images/down-arrow.gif) no-repeat right center;
			position: relative;
			z-index: 1;
		}
		
	.nav ul li a.current
	{
		font-weight: bold;
		color: #606060;
		margin: 0;
		background: url(../images/menu_hover.png) repeat-x;
	}	
	
	.nav .table 
	{
		display: table; 
		padding:  0 10px 0 25px;
	}

		.nav .select, .nav .current 
		{
			margin: 0; 
			padding: 0; 
			list-style: none; 
			display: table-cell; 
			white-space: nowrap;
			font-weight: bold;
		}


		.nav .select a 
		{
			display: block; 
			float: left; 
			font-weight: bold;
			background:  url(../images/nav_bg.png); 
			padding: 0 20px 0 20px; 
			text-decoration: none; 
			line-height: 40px; 
			white-space: nowrap; 
			color: #2b3238;
		}
		
			.nav .select a:hover, .nav .select li:hover a 
			{
				background:  url(../images/menu_hover.png); 
				padding: 0; 
				cursor: pointer; 
				color: #2b3238;
			}
		
	
	.nav .select a b
	{
		font-weight: bold;
	}
		
		.select li:hover a b
		{
			padding: 0 20px 0 20px; 
		}

	.nav .select_sub 
	{
		display: none;
		padding-bottom: 5px;
	}
	
		.select_sub 
		{
			padding-bottom: 5px;
		}

	.nav table 
	{
		border-collapse: collapse; 
		margin: -1px; 
		font-size: 1em; 
		width: 0; 
		height: 0;
	}

	.nav .sub 
	{
		margin: 0 auto; 
		padding-left: 2em; 
		list-style: none;
	}

		.nav .sub_active .current_sub a, .nav .sub_active a:hover 
		{
			background: transparent; 
			color: #2b3238;
		}

	.nav .select:hover .select_sub, .nav .current .show 
	{
		display: block; 
		position: absolute; 
		width: 100%; 
		top: 40px; 
		background: url(../images/fade.gif); 
		height: 30px;
		padding: 0; 
		z-index: 100; 
		left: 0; 
	}

	.nav .current .show 
	{
		z-index: 10;
	}


	.nav .select:hover .sub li a, .nav .current .show .sub li a 
	{
		display: block; 
		float: left; 
		background: transparent; 
		padding: 0 10px 0 10px; 
		margin: 0; 
		white-space: nowrap; 
		border: 0; 
		color: #2b3238;
	}

	.nav .current .sub li.sub_show a 
	{
		color: #2b3238; 
		cursor: default; 
	}

		.nav .select .sub li a 
		{
			font-weight: normal;
		}

			.nav .select :hover .sub li a:hover, .nav .current .sub li a:hover 
			{
				visibility: visible; 
				color: #000; 
				/*background: url(../images/hover_back.png) repeat-x;*/
				background: #fff;
			}

	#nav-search 
		{
			float: left;
			position: relative;
			top: -7px;
			left: 20px;
		}

			input.nav-text 
			{
				margin-right: 2px;
				font-size: 12px;
				padding: 3px 0px 3px 3px;
				background: #f5f5f5;
				border: 1px solid #ccc;
				-moz-border-radius: 3px;
				-khtml-border-radius: 3px;	
				-webkit-border-radius: 3px;
				border-radius: 3px;
				height: 17px;
				vertical-align: top;
				color: #666;
				width: 110px;
			}
				#nav-img
				{			
					background: #f5f5f5 url(../images/icon_textbox_search.gif) no-repeat right center;
					padding-right: 5em;
				}
			
			.nav-button
			{
				font: normal 11px/16px "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
				border: 1px solid #bbb;
				color: #464646;
				cursor: pointer;
				padding: 3px 8px !important;
				-moz-border-radius: 8px;
				-khtml-border-radius: 8px;
				-webkit-border-radius: 8px;
			}
1. Είναι δυνατόν όταν κάνω κλικ σε κάποιο από το μενού το υπομενού να ανοίγει από κάτω του και όχι από την αρχή?

2. Όταν κάνει κάποιο hover να μην κρύβεται το βέλος πίσω από το image?

3. Τα SubMenu προσπαθησα να τα πάω λίγο πιο πάνω, να είναι στο κέντρο αλλά δεν τα κατάφερα.

Στην εικόνα είναι επιλεγμένο το Services όπως φαίνεται

Εικόνα

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

CSS drop line menu

Δημοσίευση από Basilakis » 31 Οκτ 2009 10:59

1. Θα πρέπει να τους δώσεις μια συγκεκριμένη θέση με βάση το που βρίσκονται, έτσι ώστε να τα "σμπρώξεις" προς τα μέσα.

2.

Κώδικας: Επιλογή όλων

      .select li a.fly, .select .fly:hover
      {
         background: url(../images/down-arrow.gif) no-repeat right center;
         position: relative;
         z-index: 1;
      } 

Ο κώδικας σου για το hover είναι ο παραπάνω. Δεν λειτουργεί όμως σωστά. Δεν μπορείς να τα φτιάξεις έτσι, όταν απο τι στιγμή που ορίζεις να είναι ίδια, όμως παρακάτω κάνεις ένα άλλο hover, δίνοντας του το background image αλλά απο ότι φένεται κάνεις overwrite το προηγούμενο.

3.
Δώσε στο style του submenu ένα margin-bottom:5px; για να έρθει ποιο πάνω.

sneaky
Δημοσιεύσεις: 18
Εγγραφή: 21 Νοέμ 2006 12:31

CSS drop line menu

Δημοσίευση από sneaky » 01 Νοέμ 2009 15:47

1. Να σου πω δεν πολύ κατάλαβα τι εννοείς... Αν βγάλω το left: 0 το submenu ανοίγει όπως το θέλω αλλά αφήνει κενό από την αριστερή πλευρά (από την αρχή έως το submenu) και βγαίνει και εκτός οθόνης. Εκτός και αν λες να βάλω ένα νέο class για το καθένα και να του λέω πόσο μέσα θα είναι.

Κώδικας: Επιλογή όλων

.nav .select:hover .select_sub, .nav .current .show 
	{
		display: block; 
		position: absolute; 
		width: 100%; 
		top: 40px; 
		background: url(../images/fade.gif); 
		height: 30px;
		padding: 0; 
		left: 0; 
	}
2. Δεν έβγαλα άκρη και με τα 2 image οπότε άφησα μόνο το βέλος.

3. Το δοκίμασα αυτό και πριν κάνω το post αλλά δεν έπαιζε και δεν καταλαβαίνω το γιατί. Το margin-top, left, right παίζουν μια χαρά ενώ το bottom όχι :/ Θα το ξανακοιτάξω γιατί ίσως είναι αλλού το πρόβλημα.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

CSS drop line menu

Δημοσίευση από Basilakis » 01 Νοέμ 2009 16:08

Εάν του δώσεις padding-bottom:5px;

δεν έχω ιδέα πως είναι κατοποιημένο το CSS σου για αυτό κάνω διάφορες προτάσεις :)

sneaky
Δημοσιεύσεις: 18
Εγγραφή: 21 Νοέμ 2006 12:31

CSS drop line menu

Δημοσίευση από sneaky » 01 Νοέμ 2009 23:51

Αυτό που πιάνει για να το μετακινήσω είναι το top: 5px; αλλά ανεβαίνει και το background στο hover :roll:
Θα ξαναρίξω μια ματιά σε όλο το menu από την αρχή να δώ μήπως υπάρχει κάτι που δεν έχω δει και δε μου επιτρέπει να κάνω αυτό που θέλω. Θα ενημερώσω σύντομα... :D

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες