CSS Fixed menu μονο κάθετα

xctaek21 · 24 Ιουνίου 2011

Γειά σας, φτιάχνω ενα menu fixed, και θέλω να ειναι fixed μονο κάθετα και όχι οριζόντια

δηλαδή

ΠΧ http://www.sigsiu.net/forum/

κοιτάξτε σε αυτο το site, πάνω πάνω δεξιά , εχει ενα μικρομενου που λεει Contact και inprint

οπως παρατηρείτε αυτο ειναι fixed μονο οριζόντια, καθώς αμα μικρύνεις το παράθυρο μένει πάντα εκει

αλλα αμα κανεις scroll προς τα κάτω, δεν κατεβένει

το ίδιο θέλω και εγώ αλλα θελω να κατεβαίνει κάθετα και όχι οριζόντια

τώρα χρησιμοποιώ αυτό

><style type="text/css">div.banner {
 margin: 0;
 font-size: 90% /*smaller*/;
 font-weight: bold;
 line-height: 2;
 text-align: center;
 position: fixed;
 top: 1em;
 left: auto;
 width: 11.5em;
 right: 0.3em;
}

defacer · 24 Ιουνίου 2011

Δεν καταλαβαίνω τι περιγράφεις ακριβώς. Το μενού αυτό καταρχήν δεν είναι μόνο οριζόντια, άμα μικρύνεις το παράθυρο ΠΟΛΥ τότε οι 2 επιλογές μπαίνουν η μία κάτω από την άλλη.

Επίσης τίποτα στο μενού που λες δεν έχει position: fixed επομένως φυσικά και δεν μετακινείται από τη θέση του όταν κάνεις scroll.

Μήπως μια καλύτερη περιγραφή θα βοηθούσε;

xctaek21 · 24 Ιουνίου 2011

Δεν καταλαβαίνω τι περιγράφεις ακριβώς. Το μενού αυτό καταρχήν δεν είναι μόνο οριζόντια, άμα μικρύνεις το παράθυρο ΠΟΛΥ τότε οι 2 επιλογές μπαίνουν η μία κάτω από την άλλη.

Επίσης τίποτα στο μενού που λες δεν έχει position: fixed επομένως φυσικά και δεν μετακινείται από τη θέση του όταν κάνεις scroll.

Μήπως μια καλύτερη περιγραφή θα βοηθούσε;

Καταρχάς ευχαριστώ για την θέληση σου να βοηθήσεις.

Θα επισυνάψω φωτογραφίες και ίσως καταλάβεις

Εδώ φαινεται η αρχική εικόνα του site με το μενου πάνω δεξιά

μετά αφου κάνεις scroll down το μενού ως fixed καταβαινεί μια χαρά

όμως μικραίνοντας το παράθυρο έρχεται η καταστροφή

αυτό που θέλω ειναι οταν μικραίνεις το παράθυρο , το fixed menu να μένει εκει που είναι απο οριζόντιας άποψης. :-P πως να το εξηγήσω ειναι περίεργο :-P κατάλαβες πιστέυω τι θέλω

_tasos · 24 Ιουνίου 2011

Δηλαδή αν μικρύνει το παράθυρο θέλεις το menu να κρύβεται;

xctaek21 · 24 Ιουνίου 2011

Δηλαδή αν μικρύνει το παράθυρο θέλεις το menu να κρύβεται;

περίπου, να μένει απο οριζόντιας άποψης στην θέση του, δηλαδη να μην ειναι fixed και αριστερα δεξια και πανω κατω αλλα fixed μονο πάνω κάτω

βεβαια και να κρύβετε δεν με πειράζει, αλλα δεν ξέρω κατα πόσο ειναι εφικτό

_tasos · 24 Ιουνίου 2011

Οκ, τότε έχω να προτείνω 2 λύσεις. Η μία και η πιο απλή είναι να παίξεις με z-index και έτσι η κύρια σελίδα να εμφανίζεται πιο πάνω από το div του menu και να το κρύβει. Η άλλη είναι να το βάλεις fixed σε σχέση με το wrapper div της σελίδας, ώστε πάντα να βρίσκεται δεξιά του site.

Για να το πετύχεις, ίσως να χρειαστεί να αλλάξεις το markup σου, αυτό το λέω επειδή δεν ξέρω πως είναι η html και να πρέπει π.χ. να αλλάξεις κάποια πράγματα. Αν θέλεις, δώσε το βασικό HTML της σελίδας σου ή αν το έχεις online κάποιο link.

xctaek21 · 24 Ιουνίου 2011

δεν ξέρω κατα ποσο θα σε βοηθήσει γιατι ειναι λίγο περίεργο, ειναι joomla site

αυτό ειναι το index.php, αλλά δεν υπάρχει μέσα ο κώδικας του menu, αλλα σκέψου πως ειναι φορτωμένος στο user8

(αμα θες να δεις και τον κώδικα του μενου με το css του πές μου και το βάζω, βέβαια δύσκολο να βγάλεις άκρη απο αυτό που θα δείς παρακάτω :-P)

><?php
/**
* @copyright	Copyright (C) 2008 - 2009 JoomVision.com. All rights reserved.
* @license		GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
include_once (dirname(__FILE__).DS.'jv_tools.php');

// Javascript
   unset($this->_scripts[$this->baseurl . '/media/system/js/mootools.js']);
   unset($this->_scripts[$this->baseurl . '/media/system/js/caption.js']);
   
   if($gzip == "true") :
   $this->_scripts = array_merge(array(_TEMPLATE_URL . 'js/jv.script.js.php' => 'text/javascript'), $this->_scripts);
    else:
//$this->_scripts = array_merge(array(_TEMPLATE_URL . 'js/jv.collapse.js' => 'text/javascript'), $this->_scripts);
$this->_scripts = array_merge(array(_TEMPLATE_URL . 'js/jv.script.js' => 'text/javascript'), $this->_scripts);
   $this->_scripts = array_merge(array(_TEMPLATE_URL . 'js/mootools.js' => 'text/javascript'), $this->_scripts);
   endif;

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>
<link rel="stylesheet" href="<?php echo _BASE_URL; ?>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo _BASE_URL; ?>templates/system/css/general.css" type="text/css" />
<?php if($gzip == "true") : ?>
   <link rel="stylesheet" href="<?php echo _TEMPLATE_URL; ?>css/template.css.php" type="text/css" />
<?php else: ?>
   <link rel="stylesheet" href="<?php echo _TEMPLATE_URL; ?>css/default.css" type="text/css" />
   <link rel="stylesheet" href="<?php echo _TEMPLATE_URL; ?>css/template.css" type="text/css" />
   <link rel="stylesheet" href="<?php echo _TEMPLATE_URL; ?>css/typo.css" type="text/css" />
<?php endif; ?>
<link rel="stylesheet" href="<?php echo $jvTools->parse_jvcolor_cookie(); ?>" type="text/css" />
<script type="text/javascript">
	var baseurl = "<?php echo _BASE_URL; ?>";
	var jvpathcolor = '<?php echo _TEMPLATE_URL; ?>css/colors/';
	var tmplurl = '<?php echo _TEMPLATE_URL;?>';
	var CurrentFontSize = parseInt('<?php echo $jvTools->getParam('jv_font');?>');
</script>
<!--[if lte IE 6]>
<link rel="stylesheet" href="<?php echo _TEMPLATE_URL; ?>css/ie6.css" type="text/css" />
<script type="text/javascript" src="<?php echo _TEMPLATE_URL ?>js/ie_png.js"></script>
<script type="text/javascript">
window.addEvent ('load', function() {
   ie_png.fix('.png');
});
</script>
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="<?php echo _TEMPLATE_URL; ?>/css/ie7.css" type="text/css" />
<![endif]-->
<script type="text/javascript">

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-20903834-1']);
 _gaq.push(['_trackPageview']);

 (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

</script> </head>
<body id="bd" class="fs<?php echo $jvTools->getParam('jv_font'); ?> <?php echo $jvTools->getParam('jv_display'); ?> <?php echo $jvTools->getParam('jv_display_style'); ?>">
<div id="jv-wrapper-ver">
<div id="jv-wrapper-bot">
	<div id="jv-wrapper">

		<div id="jv-header">
			<div id="jv-logo"><h1><a href="<?php echo _BASE_URL; ?>"><span><?php echo _SITE_NAME; ?></span></a></h1></div>
			<?php if($this->countModules('top')) : ?>
			<div id="jv-top"><jdoc:include type="modules" name="top" /></div>
			<?php endif; ?>
		</div>

		<?php if($hightlight || $user4) : ?>
		<div id="jv-userwrap1" class="clearfix">
			<?php if($hightlight) : ?>
			<div id="jv-hightlight"><jdoc:include type="modules" name="hightlight" style="jvxhtml2" /></div>
			<?php endif; ?>
			<?php if($user4) : ?>
			<div id="jv-user4"><jdoc:include type="modules" name="user4" style="jvxhtml2" /></div>
			<?php endif; ?>
		</div>
		<?php endif; ?>

		<div id="jv-mainmenu" class="clearfix">
			<?php if($menustyle == 'split' || $menustyle == 'submoo') : ?>
			   <?php $menu->show(0,0); ?>
			<?php else : ?>
				<?php $menu->show(); ?>
			<?php endif; ?>
			<?php if($user3) : ?>
			<div id="jv-user3"><jdoc:include type="modules" name="user3" style="jvxhtml2" /></div>
			<?php endif; ?>
		</div>

		<?php if (($menustyle == 'split' || $menustyle == 'submoo') && ($menu->hasChild(1))): ?>
		<div id="jv-userwrap2" class="clearfix">
			<?php $menu->show(1,6); ?>
		</div>
		<?php else : ?>
		<div id="jv-usersp" class="clearfix"></div>
		<?php endif; ?>
		
		<div id="jv-padding" class="clearfix">

			<?php if($slideshow) : ?>
			<div id="jv-userwrap3" class="clearfix">
				<jdoc:include type="modules" name="slideshow" />
			</div>
			<?php endif; ?>

			<?php
				$spotlight = array ('user1','user2');
				$botsl = $jvTools->calSpotlight ($spotlight,$jvTools->isOP()?100:100);
				if( $botsl ) :
			?>
				<div id="jv-userwrap3" class="clearfix">
					<?php if($user1) : ?>
						<div id="jv-user1" class="jv-user jv-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
							<div class="jv-box-inside">
								<jdoc:include type="modules" name="user1" style="jvrounded" />
							</div>
						</div>
					<?php endif; ?>
					<?php if($user2) : ?>
						<div id="jv-user2" class="jv-user jv-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
							<div class="jv-box-inside">
								<jdoc:include type="modules" name="user2" style="jvrounded" />
							</div>
						</div>
					<?php endif; ?>
				</div>
			<?php endif; ?>

			<div id="jv-contentwrapper" class="clearfix">
				<div id="jv-container<?php echo $jv_width; ?>">

					<div id="jv-content">
						<?php if($user5) : ?>
						<div id="jv-beforecontent" class="clearfix"><jdoc:include type="modules" name="user5" style="jvrounded" /></div>
						<?php endif; ?>
						<div id="jv-content-inside" class="clearfix">
							<div class="jvbr">
								<div class="jvbl">
									<div class="jvtr png">
										<div class="jvtl png">
											<jdoc:include type="message" />
											<jdoc:include type="component" />
										</div>
									</div>
								</div>
							</div>
						</div>
						<?php if($user6) : ?>
						<div id="jv-aftercontent" class="clearfix"><jdoc:include type="modules" name="user6" style="jvrounded" /></div>
						<?php endif; ?>

						<?php
							$spotlight = array ('col1','col2','col3');
							$botsl = $jvTools->calSpotlight ($spotlight,$jvTools->isOP()?100:100);
							if( $botsl ) :
						?>
						<div id="jv-usercol" class="clearfix">
							<?php if($user9) : ?>
								<div id="jv-col1" class="jv-user jv-box<?php echo $botsl['col1']['class']; ?>" style="width: <?php echo $botsl['col1']['width']; ?>;">
									<div class="jv-box-inside">
										<jdoc:include type="modules" name="col1" style="jvrounded" />
									</div>
								</div>
							<?php endif; ?>
							<?php if($user9) : ?>
								<div id="jv-col2" class="jv-user jv-box<?php echo $botsl['col2']['class']; ?>" style="width: <?php echo $botsl['col2']['width']; ?>;">
									<div class="jv-box-inside">
										<jdoc:include type="modules" name="col2" style="jvrounded" />
									</div>
								</div>
							<?php endif; ?>
							<?php if($user9) : ?>
								<div id="jv-col3" class="jv-user jv-box<?php echo $botsl['col3']['class']; ?>" style="width: <?php echo $botsl['col3']['width']; ?>;">
									<div class="jv-box-inside">
										<jdoc:include type="modules" name="col3" style="jvrounded" />
									</div>
								</div>
							<?php endif; ?>
						</div>
						<?php endif; ?>

					</div>

					<div id="jv-rightcolumn">

						<?php if($user7) : ?>
						<div id="jv-user7" class="clearfix"><jdoc:include type="modules" name="user7" style="jvrounded" /></div>
						<?php endif; ?>

						<?php if($modLeft || $modRight) : ?>
						<div id="jv-leftright<?php echo $jv_width2; ?>" class="clearfix">

							<?php if($modLeft) : ?>
							<div id="jv-left"><jdoc:include type="modules" name="left" style="jvrounded" /></div>
							<?php endif; ?>

							<?php if($modRight) : ?>
							<div id="jv-right"><jdoc:include type="modules" name="right" style="jvrounded" /></div>
							<?php endif; ?>

						</div>
						<?php endif; ?>

						<?php if($user8) : ?>
						<div id="jv-user8" class="clearfix"><jdoc:include type="modules" name="user8" style="jvrounded" /></div>
						<?php endif; ?>

					</div>

				</div>
			</div>

		</div>
		<?php
			$spotlight = array ('user9','user10','user11');
			$botsl = $jvTools->calSpotlight ($spotlight,$jvTools->isOP()?100:99);
			if( $botsl ) :
		?>
		<div id="jv-userwrap5" class="clearfix">
			<div class="jvbr">
				<div class="jvbl">
					<div class="jvtr png">
						<div class="jvtl png">
							<?php if($user9) : ?>
								<div id="jv-user9" class="jv-user jv-box<?php echo $botsl['user9']['class']; ?>" style="width: <?php echo $botsl['user9']['width']; ?>;">
									<div class="jv-box-inside">
										<jdoc:include type="modules" name="user9" style="jvxhtml2" />
									</div>
								</div>
							<?php endif; ?>
							<?php if($user10) : ?>
								<div id="jv-user10" class="jv-user jv-box<?php echo $botsl['user10']['class']; ?>" style="width: <?php echo $botsl['user10']['width']; ?>;">
									<div class="jv-box-inside">
										<jdoc:include type="modules" name="user10" style="jvxhtml2" />
									</div>
								</div>
							<?php endif; ?>
							<?php if($user11) : ?>
								<div id="jv-user11" class="jv-user jv-box<?php echo $botsl['user11']['class']; ?>" style="width: <?php echo $botsl['user11']['width']; ?>;">
									<div class="jv-box-inside">
										<jdoc:include type="modules" name="user11" style="jvxhtml2" />
									</div>
								</div>
							<?php endif; ?>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php endif; ?>

		<?php if($inset || $showTools) : ?>
		<div id="jv-inset" class="clearfix">
			<div id="jv-inset-inner"><jdoc:include type="modules" name="inset" style="xhtml" /></div>
			<?php if($showTools) : ?>
			<div id="jv-tools">
				<?php $jvTools->getChangeFont($jvTools->getParam('jv_font')); ?>
			</div>
			<?php endif; ?>
		</div>
		<?php endif; ?>
	</div>

</div>
</div>


<div id="jv-footer-wrapper" style="background-image: url(http://www.athenshops.gr/images/footbg.gif);">
<div id="jv-footer">
	<jdoc:include type="modules" name="footer" style="xhtml" />
		</div>
</div>

<jdoc:include type="modules" name="debug" />
</body>
</html>

_tasos · 24 Ιουνίου 2011

Οκ, αυτή είναι η δομή του html σου. To div με το menu που εμφανίζεται όμως;

Δες λίγο εδώ:

>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <style type="text/css">
       * {
           margin: 0px;
           padding: 0px;
       }
       body {
           text-align: center;
       }
       #wrapper {
           margin: auto 0px;
           position: relative;
       }
       #content {
           width: 1000px;
           height: 500px;
           border: solid 1px #CCCCCC;
           background-color: #EEEEEE;
           position: relative;
           top: 0px;
           left: 0px;
           z-index: 2000;
       }
       #side-menu {
           position: fixed;
           top: 1em;
           left: auto;
           width: 150px;
           height: 150px;
           right: 0.3em;
           border: solid 1px #CC0000;
           background-color: #EE0000;
           z-index: 2;
       }
   </style>
</head>
<body>
   <div id="wrapper">
       <div id="content">
           here is main page content
       </div>
       <div id="side-menu">
           <ul>
               <li><a href="#">menu item 1</a></li>
               <li><a href="#">menu item 2</a></li>
               <li><a href="#">menu item 3</a></li>
               <li><a href="#">menu item 4</a></li>
           </ul>
       </div>
   </div>
</body>
</html>

Υπάρχουν δύο div μέσα στο div#wrapper, όπου και τα δύο έχουν κάποια τιμή στο position. Το div#content που έχει μεγαλύτερο z-index κρύβει το άλλο div, που είναι το menu. Ελπίζω να σε βοήθησα με αυτό..

xctaek21 · 24 Ιουνίου 2011

Οκ, αυτή είναι η δομή του html σου. To div με το menu που εμφανίζεται όμως;

Δες λίγο εδώ:

>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <style type="text/css">
       * {
           margin: 0px;
           padding: 0px;
       }
       body {
           text-align: center;
       }
       #wrapper {
           margin: auto 0px;
           position: relative;
       }
       #content {
           width: 1000px;
           height: 500px;
           border: solid 1px #CCCCCC;
           background-color: #EEEEEE;
           position: relative;
           top: 0px;
           left: 0px;
           z-index: 2000;
       }
       #side-menu {
           position: fixed;
           top: 1em;
           left: auto;
           width: 150px;
           height: 150px;
           right: 0.3em;
           border: solid 1px #CC0000;
           background-color: #EE0000;
           z-index: 2;
       }
   </style>
</head>
<body>
   <div id="wrapper">
       <div id="content">
           here is main page content
       </div>
       <div id="side-menu">
           <ul>
               <li><a href="#">menu item 1</a></li>
               <li><a href="#">menu item 2</a></li>
               <li><a href="#">menu item 3</a></li>
               <li><a href="#">menu item 4</a></li>
           </ul>
       </div>
   </div>
</body>
</html>

Υπάρχουν δύο div μέσα στο div#wrapper, όπου και τα δύο έχουν κάποια τιμή στο position. Το div#content που έχει μεγαλύτερο z-index κρύβει το άλλο div, που είναι το menu. Ελπίζω να σε βοήθησα με αυτό..

το div με το menu βρίσκετε σε ενα module, δηλαδή σκέψου σαν να ειναι εκει που λεει user8 στον κώδικα.

...

σε ευχαριστώ πολυ, νομίζω θα δυσκολευτώ να το εφαρμόσω αυτο, αλλα θα προσπαθήσω

_tasos · 25 Ιουνίου 2011

Για να πιάσει το z-index πρέπει τα δύο elements να έχουν ορισμένο κάποιο position. Αν δεν έχουν κάποιο position δεν θα δουλέψει. Αν δεν σου βγαίνει, εδώ είμαστε κ το βλέπουμε

xctaek21 · 27 Ιουνίου 2011

δεν δούλεψε :-/

η άλλη λύση;

_tasos · 27 Ιουνίου 2011

Η άλλη λύση που είχα κατά νου, είναι με λίγη javascript να ορίζεις έτσι το position (top, left) ώστε να "κάθεται" πάντα δίπλα στο wrapper div του site. Θα ετοιμάσω ένα μικρό sample και το βλέπουμε

xctaek21 · 28 Ιουνίου 2011

Η άλλη λύση που είχα κατά νου, είναι με λίγη javascript να ορίζεις έτσι το position (top, left) ώστε να "κάθεται" πάντα δίπλα στο wrapper div του site. Θα ετοιμάσω ένα μικρό sample και το βλέπουμε

καταρχάς ευχαριστώ πολύ για την βοήθεια σου.

κατάφερα να τοποθετήσω το menu πίσω απο τα πάντα βάζοντας στο z-index του menu την τιμη -1

όμως έπειτα δεν πατιόταν το menu :-/

_tasos · 28 Ιουνίου 2011

Τότε αυτό σημαίνει πως υπάρχει κάποιο div που βρίσκεται πάνω από το menu. Αν έχεις υπόψη σου το firebug, θα μπορέσεις να δεις πιο είναι αυτό και να ορίσεις το z-index όπως σε βολεύει.

Μπορείς να δώσεις κάποιο test link;

xctaek21 · 29 Ιουνίου 2011

Τότε αυτό σημαίνει πως υπάρχει κάποιο div που βρίσκεται πάνω από το menu. Αν έχεις υπόψη σου το firebug, θα μπορέσεις να δεις πιο είναι αυτό και να ορίσεις το z-index όπως σε βολεύει.

Μπορείς να δώσεις κάποιο test link;

θες test link με z-index κανονικο , να ειναι απο πανω, η με -1;

Σύνδεση

CSS Fixed menu μονο κάθετα

Προτεινόμενες αναρτήσεις

xctaek21

defacer

xctaek21

_tasos

xctaek21

_tasos

xctaek21

_tasos

xctaek21

_tasos

xctaek21

_tasos

xctaek21

_tasos

xctaek21

Αρχειοθετημένο

Σύνδεση