SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal submenu onclick

    I have a tabbed list menu styled in CSS now. What I'm trying to do is put a submenu below it so that when a user clicks a tab to go to a page, there will be a submenu of that section displayed below the tab. No JS, no CSS popups, no DHTML needed, but a php script will put in the submenu when needed. My problem is how to get the submenu to center under the tab that was clicked.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you're looking for is a PHP script that will "include" the appropriate submenu in the source code. CSS will then be able to style it however you want it.

  3. #3
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep, I have that. The php puts the submenu in a list, but it's aligned all the way to the right (because I use text-align:right), but I would like it to be centered under the appropriate tab. What kind of structure does it take to do this?

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, can you show me the HTML output along with the full CSS code? (please use the HTML and CODE tags if you copy/paste the code)

  5. #5
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sure:

    HTML Code:
    <div id="header">
    	<?php if ($logo) : ?>
    		<a href="<?php print url() ?>" title="Index Page"><img src="<?php print($logo) ?>" alt="<?php print($site_name) ?> Logo" /></a>
    	<?php endif;?>
    	<?php if ($site_name) : ?>
    		<h1 id="site-name"><?php print($site_name) ?></h1>
    	<?php endif;?>
    	<?php if ($site_slogan) : ?>
    		<h2 id="site-slogan"><?php print($site_slogan) ?></h2>
    	<?php endif;?>
    		<ul id="navlist">
    			<?php foreach (array_reverse($primary_links) as $link): ?>
    				<li><?php print $link; ?></li>
    			<?php endforeach; ?>
    		</ul>
    </div>
    <hr class="hide" />
    
         <div id="sec-navigation">
    	  <?php if (is_array($secondary_links) && (count($secondary_links) != 0)) : ?>
    	   <ul id="nav-secondary">
    		<?php foreach ($secondary_links as $link): ?>
    		 <li><?php print $link?></li>
    		<?php endforeach; ?>
    	   </ul>
    	  <?php endif; ?>
        </div>
    Code:
    #header
    {
    	height:80px;
    	margin-top:5px;
      	font-family: georgia, times, serif;
    }
    #site-name 
    {
    	font-size: large;
    	color:#fff;
    	font-weight:normal;
    	display:inline;
    	border-bottom:2px solid #FDC737;
    }
    #header img  
    {
    	padding: 5px;
    	padding-bottom:15px;
    	width:73px;
    	float: left;
    }
    #site-slogan 
    { 
    	display:block;
    	padding-top:5px;
    	font-size:large;
    	font-weight:bold;
    }
    #navlist
    {
    	float:right;
    }
    
    #navlist ul, #navlist li
    {
    	display: inline;
    	list-style-type: none;
    }
    #navlist a:link, #navlist a:visited
    {
    	float: left;
    	text-decoration: none;
    	background-color: #FDC737;
    	color: #000;
        padding:0px 10px 0px 10px;
    	line-height: 25px;
    	margin-left:5px;
    	background:url(images/tab.jpg) repeat-x;
    }
    
    #navlist a:hover 
    { 
    	text-decoration:underline;
    }
    #sec-navigation
    {
    	width:100%;
    	background:url(images/tab2.jpg) repeat-x;
    	height: 20px;
    	color: #000;
    	text-align:right;
    	line-height:20px;
    }
    #nav-secondary ul, #nav-secondary li
    {
    	text-align:right;
    	display:inline;
    	list-style-type:none;
    }
    
    #nav-secondary a:link, #nav-secondary a:visited
    {
    	text-decoration: none;
    	color: #000;
        padding:0px 10px 0px 10px;
    	line-height: 20px;
    	margin-left:5px;
    	font-weight:bold;
    }
    
    #nav-secondary a:hover
    {
    	text-decoration:underline;
    }

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but I don't need the PHP code (CSS doesn't need either, since it never gets to "see" it). If you click "View Source" in your browser, it will give you the source code I need to see. Can you copy and paste that here, please?

  7. #7
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <div id="header">
    			<a href="/drupal/" title="Index Page"><img src="/drupal/files/logo.jpg" alt="UNIVERSITY OF SOUTHERN MISSISSIPPI Logo" /></a>
    				<h1 id="site-name">UNIVERSITY OF SOUTHERN MISSISSIPPI</h1>
    				<h2 id="site-slogan">INSTITUTE OF HIGHER WEB LEARNING</h2>
    			<ul id="navlist">
    							<li><a href="/drupal/?q=/node" title="">Home</a></li>
    							<li><a href="http://www.usm.edu/pr/web/wiki/" title="Web World Wiki">Wiki</a></li>
    							<li><a href="/drupal/?q=/sitemap" title="">Site Map</a></li>
    							<li><a href="/drupal/?q=node/2" title="" class="active">Guidelines</a></li>
    							<li><a href="/drupal/?q=/contact" title="">Contact Us</a></li>
    					</ul>
    </div>
    <hr class="hide" />
     
         <div id="sec-navigation">
    	  	   <ul id="nav-secondary">
    				 <li><a href="/drupal/?q=node/3" title="">Navigation</a></li>
    				 <li><a href="/drupal/?q=node/4" title="">Test</a></li>
    			   </ul>
    	      </div>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •