WordPress.org

Ready to get started?Download WordPress

Forums

Sliding Door Navigation and WordPress (1 post)

  1. SasoriStudios
    Member
    Posted 5 years ago #

    I've been searching the codex, the forums and the internet and still I can't seem to get this code to work.

    I'm new to using .php and wordpress to code websites, so I'm not sure how to:

    1). Call individual pages within the navigation when the navigation is created using a single "sliding door" image

    2). Make that page current in the body tag using php so that the selected menu item stays in hover state.

    Here is my header code:

    <title><?php bloginfo('name'); ?></title>
    
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
        <!--[if IE]>
        <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style-browser-ie.css" type="text/css" media="screen" />
        <![endif]-->
    	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    	<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />
    
    	<?php if (is_page('Home')) { ?><body id='home'>
        <?php } elseif ( is_page('News')) { ?><body id='news'>
        <?php } elseif ( is_page('Portfolio')) { ?><body id='portfolio'>
    	<?php } elseif ( is_page('Journal')) { ?><body id='journal'>
        <?php elseif ( is_page('About')) { ?><body id='about'>
        <?php elseif ( is_page('Services')) { ?><body id='services'>
    	<?php } else { ?>
    <body>
    <?php } ?>
    
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    	<?php wp_get_archives('type=monthly&amp;format=link'); ?>
    	<?php //comments_popup_script(); // off by default ?>
    	<?php wp_head(); ?>
    </head>
    
    <body>
    <div id="main_wrapper">
    
    <!-- ------------------------------ BEGIN HEADER ------------------------------ -->
    	<div id="header">
    
    		<div id="header_inner">
        		<h1><a href="#">sasori studios</a></h1>
           		<p>Sasori Studios is the online portfolio of graphic artist, photographer, writer, and web designer Jennika Smith.<p>
        	</div>
    <!-- ------------------------------ BEGIN NAVIGATION ------------------------------ -->
            <div id="main_nav_container">
        		<div id="main_nav">
        		<ul>
               		<li id="home"><a href="<?php echo get_option('home'); ?>/">Home</a></li>
                	<li id="news"><a href="#">News</a></li>
            		<li id="portfolio"><a href="#">Portfolio</a></li>
                	<li id="journal"><a href="#">Journal</a></li>
                	<li id="about"><a href="#">About</a></li>
                	<li id="services"><a href="#">Services</a></li>
    			</ul>
            	</div>
    		</div>
    <!-- ------------------------------ END NAVIGATION ------------------------------ -->
            <div id="hire_cloud">
        		<div id="hire_cloud_inner">
            		<a href="#">want to hire me?</a>
            	</div>
    		</div>
    
    	</div>
    <!-- ------------------------------ END HEADER ------------------------------ -->

    And here is the CSS:

    /* NAVIGATION */
    
    /* ----- MAIN NAVIGATION ----- */
    
    #main_nav_container * {
    	margin:0;
    	padding:0;
    	}
    div#main_nav {
    	width:672px;
    	height:56px;
    	float:left;
    	}
    div#main_nav ul {
    	float:left;
    	}
    div#main_nav li {
    	list-style-type:none;
    	float:left;
    	}
    div#main_nav a {
    	display:block;
    	outline:none;
    	}
    div#main_nav ul li a {
    	display:block;
    	height:56px;
    	width:110px;
    	background:transparent url(../images/navigation_clear.png) no-repeat;
    	text-indent:99999px;
    	}
    div#main_nav ul li#home a {
    	background-position: -4px 0px;
    	}
    div#main_nav ul li#home a:hover, body#home ul li a {
    	background-position: -4px -59px;
    	}
    div#main_nav ul li#news a {
    	background-position: -115px 0px;
    	}
    div#main_nav ul li#news a:hover, body#news ul li a {
    	background-position: -115px -59px;
    	}
    div#main_nav ul li#portfolio a {
    	background-position: -226px 0px;
    	}
    div#main_nav ul li#portfolio a:hover, body#portfolio ul li a {
    	background-position: -226px -59px;
    	}
    div#main_nav ul li#journal a {
    	background-position: -337px 0px;
    	}
    div#main_nav ul li#journal a:hover, body#journal ul li a {
    	background-position: -337px -59px;
    	}
    div#main_nav ul li#about a {
    	background-position: -448px 0px;
    	}
    div#main_nav ul li#about a:hover, body#about ul li a {
    	background-position: -448px -59px;
    	}
    div#main_nav ul li#services a {
    	background-position: -559px 0px;
    	}
    div#main_nav ul li#services a:hover, body#services ul li a {
    	background-position: -559px -59px;
    	}
    
    /* ----- HIRE CLOUD ----- */
    div#hire_cloud_inner a {
    	float:left;
    	display:block;
    	width:109px;
    	height:71px;
    	text-indent:-99999px;
    	background:transparent url(../images/hire_cloud.png) no-repeat 0 0;
    	outline:none;
    	overflow:hidden;
    	}
    div#hire_cloud_inner a:hover {
    	background-position: 0 -71px;
    	}
    
    /* ----- ----- */

    Whenever I add the PHP to the header to activate the current page, it breaks the template. Whenever I've tried the hack suggested online using

    <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i’, ‘<li$1><a$2><span>$3</span></a>’, wp_list_categories(’echo=0&amp;orderby=name&amp;exlude=181&amp;title_li=&amp;depth=1′)); ?>

    for listing the pages, it breaks the page -- probably because I'm not using the <span> tag.

    If anyone has ideas, I'm open to them.

Topic Closed

This topic has been closed to new replies.

About this Topic