June 12, 201313 yr Hello, I am having a little head scratch over how to solve a problem I am having. I have a deadline for a website I am building, and intend on building it on Joomla. However I am VERY new to Joomla and am going to simply convert the website to joomla in my own time afterwards as a learning experience. For now, my website is a bootstrap html/css static website. What I would like to do is create template files of my header, navbar, footer for example (20 pages, one alteration to a navbar I don't want to edit 20 html files). First of all, could someone very quickly explain to me the php line to echo a template file where I would like it to render the code on the webpage. Secondly, I have a question with regards to the navbar. For each different page, I would like a certain aspect to be active so it is highlighted with the li 'active' class for the appropriate page. Could someone give me some insight into how to solve this. I am a php learner at the moment! Thank you! An example of my navigation bar on the home page: <!-- NAVIGATION BAR --> <!-- Part 1 --> <div id="top"> <div id="span12"> <div class="container"> <div id="subbar" class="pull-right"> <ul class="nav-list text-center"> <li class=""> <a href="about">About Us</a> </li> <li class="splitter"></li> <li class=""> <a href="contact">Contact Us</a> </li> <li class="splitter"></li> <li> <a href="#"><i class="icon-twitter"></i></a> </li> <li class="splitter"></li> <li> <a href="#"><i class="icon-facebook"></i></a> </li> <li class="splitter"></li> <li> <a href="#"><i class="icon-pinterest"></i></a> </li> <li class="splitter"></li> <li> <a href="#"><i class="icon-google-plus"></i></a> </li> </ul> </div><!-- subbar --> </div><!-- container --> </div><!-- Span12 --> </div><!-- top --> <!-- Part 2 --> <div id="header"> <div class="navbar navbar-inverse"> <div class="navbar-inner"> <!-- nav-collapse START --> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand hidden-desktop" href="/">Families Relief</a> <div class="nav-collapse collapse text-center"> <!-- nav-collapse END --> <div class="container"> <div class="span12"> <ul class="nav pull-right"> <li class="pull-right"> <a class="btn-danger" href="donate"><i class="icon-medkit"> DONATE!</i></a> </li> </ul> <ul class="nav pull-right"> <li class="active"> <a href="/">Home</a> </li> <li class="dropdown"> <a href="where" class="dropdown-toggle disabled" data-toggle="dropdown"> Where? <b class="caret"></b> </a> <ul class="dropdown-menu"> <li class="nav-header">Where we operate</li> <li class="divider"></li> <li><a href="where/africa">Africa</a></li> <li><a href="where/bangladesh">Bangladesh</a></li> <li><a href="where/palestine-gaza">Palestine/Gaza</a></li> <li><a href="where/kashmir">Kashmir</a></li> <li><a href="where/pakistan">Pakistan</a></li> </ul> </li> <li class=""> <a href="appeals">Current Appeals</a> </li> <li class=""> <a href="news">Latest News</a> </li> <li class=""> <a href="events">Events</a> </li> </ul> </div><!-- Nav Collapse --> </div><!-- Span12 --> </div><!-- Container --> </div><!-- Navbar Inner --> </div><!-- Navbar Inverse --> </div><!-- Header -->
June 12, 201313 yr Before you start coding you might want to mark up on a piece of paper the aspects of the page that are common to every page, for example Header, Footer and Sidebar. Create 3 files called header.html, footer.html and sidebar.html and insert the relevant code. In each page file you include the template file with the include function: include('views/header.html'); I usually put these files in a different folder so be sure to specify the full path. Your full page will look something like this <?php $page = 'index'; include ('views/header.html'); ?> <div class="some_class"> blah blah blah <p>ipsem lorem</p> </div> <?php include ('views/sidebar.html'); ?> <div class="another_class"> blah blah blah <p>more text</p> </div> <?php include ('views/footer.html'); ?> You can switch between php and html by using the php tags when you want to do some php coding. You will notice that I included a $page variable in the header file. This is to answer your second question. Set that variable in every page before you include the file that displays the navigation. Then when displaying the aspect that you want to have an 'active' class, check the variable first. One way to do navigation is to create an array of nav items and then loop through the array. $nav_items = array('index'=>'Home', 'events'=>'Events' ); foreach ($nav_items as $nav_href=>$nav_title) { if ($page == $nav_href) { echo '<li class="active">' . $nav_title . '</li>'; } else { echo '<li>' . $nav_title . '</li>'; } } Because you have a submenu you will need to have an if statement to cater for that. You should be able to fit that into the above skeleton code. Also with the above, be sure to get your use of single and double quotes correct. There are other ways to achieve the active class situation you're after including setting an id on each page's body tag but I find the above easy.
June 14, 201313 yr Author Hello Gadgetgirl.. I am a little confused as to how to implement your 2nd solution. Unfortunately, I am a young fella trying to self-teach php and I am relatively new to it. I think I understand what the statements are.. the $nav_items = array is creating a list of the menu items. If the $page matches one of them, set that li class to active. I am just currently unsure as to where to put that code and how to alter it. So far, I have altered the array to the following for every menu item: This is my php code for the top of my webpage. <?php $nav_items = array('index'=>'Home', 'where'=>'Where?', 'appeals'=>'Current Appeals', 'news'=>'Latest News', 'events'=>'Events', 'dontate'=>'Dontate', 'africa'=>'Africa', 'bangladesh'=>'Bangladesh', 'gaza'=>'Palestine/Gaza', 'kashmir'=>'Kashmir', 'pakistan'=>'Pakistan', 'uk'=>'United Kingdom' ); foreach ($nav_items as $nav_href=>$nav_title) { if ($page == $nav_href) { echo '<li class="active">' . $nav_title . '</li>'; } else { echo '<li>' . $nav_title . '</li>'; } } ?> Now, I am unsure what to do with the rest of the php code and where to put it in my navbar. I'll keep playing around while I await a response The ul section of my navbar with a subnav in is as follows: <ul class="nav pull-right"> <li class="pull-right"> <a class="btn-danger" href="donate"><i class="icon-medkit"> DONATE!</i></a> </li> </ul> <ul class="nav pull-right"> <li class=""> <a href="../">Home</a> </li> <li class="dropdown"> <a href="../where/" class="dropdown-toggle disabled" data-toggle="dropdown"> Where? <b class="caret"></b> </a> <ul class="dropdown-menu"> <li class="nav-header">Where we operate</li> <li class="divider"></li> <li><a href="../where/africa">Africa</a></li> <li><a href="../where/bangladesh">Bangladesh</a></li> <li><a href="../where/palestine-gaza">Palestine/Gaza</a></li> <li><a href="../where/kashmir">Kashmir</a></li> <li><a href="../where/pakistan">Pakistan</a></li> </ul> </li> <li class=""> <a href="../appeals">Current Appeals</a> </li> <li class=""> <a href="../news">Latest News</a> </li> <li class=""> <a href="../events">Events</a> </li> </ul> Edited June 14, 201313 yr by lcot
June 14, 201313 yr Author Okay, I have actually figured this now! I knew it would be simple, however I have a further query. As you can see for the dropdown menu, I have a <li class="dropdown> for the Where? menu item. No other list item has this class. My question is, how can I tell the php code to add class dropdown just to the where menu item, AND add dropdown active if the active page is the Where page. BUT, all the other list items want no class unless they should be active, in which case the li class wants to be just active. Any help? I'm confused...
June 14, 201313 yr Author I am currently here with this issue. It doesn't work and I am out of ideas and not sure how to rectify this problem! :/ Any help? $pageLoc = 'where'; $nav_items = array('index'=>'Home'==>'', 'where'=>'Where?'==>'dropdown'==>'', 'appeals'=>'Current Appeals'==>'', 'news'=>'Latest News'==>'', 'events'=>'Events'==>'', 'dontate'=>'Dontate'==>'', ); $nav_sub = array('africa'=>'Africa', 'bangladesh'=>'Bangladesh', 'gaza'=>'Palestine/Gaza', 'kashmir'=>'Kashmir', 'pakistan'=>'Pakistan', 'uk'=>'United Kingdom' ); foreach ($nav_items as $nav_href=>$nav_title=>$nav_class) { if ($pageHref == $nav_href) { echo '<li class="' . $nav_class . 'active">' . $nav_title . '</li>'; } else { echo '<li class="' . $nav_class . '">' . $nav_title . '</li>'; } }
June 14, 201313 yr You need some nested if statements and another foreach loop. It's not pretty but off the top of my head this should work. The nice thing is if you need to add another menu item, you just add it once to the appropriate array. echo '<ul>'; $nav_items = array('index'=>'Home', 'where'=>'Where?', 'appeals'=>'Current Appeals', 'news'=>'Latest News', 'events'=>'Events', 'dontate'=>'Dontate'); $sub_nav = array( 'africa'=>'Africa', 'bangladesh'=>'Bangladesh', 'gaza'=>'Palestine/Gaza', 'kashmir'=>'Kashmir', 'pakistan'=>'Pakistan', 'uk'=>'United Kingdom' ); foreach ($nav_items as $nav_href=>$nav_title) { if ($nav_href == 'where') { if ($page == $nav_href) { echo '<li class="active">' . $nav_title . '<ul class="dropdown active">'; } else { echo '<li>' . $nav_title . '<ul class="dropdown">'; } foreach ($sub_nav as $sub_item=>$value) { echo '<li><a href="../where/' . $sub_item . '">' . $value . '</a></li>'; } echo '</ul>'; } else { if ($page == $nav_href) { echo '<li class="active">' . $nav_title . '</li>'; } else { echo '<li>' . $nav_title . '</li>'; } } } echo '</ul>'; ?> When you get a chance, spend some time working with arrays and multi-dimensional arrays. Once you get your head round them, they enable you to do some fairly tricky processing with not a lot of coding.
June 14, 201313 yr Author I'll run this now!! Thanks for the reply.. I have actually been reading up on nested arrays as I thought that is what I needed.. hopefully this will help me better understand them and work for the website! Thanks. Ill report back shortly.
June 14, 201313 yr Author Problems after problems.. Okay, I am trying to get the following structure: <ul> <li> <a href="#">Nav Item 1</a> </li> <li class="dropdown"> <a href="/where" class="dropdown-toggle disabled" data-toggle="dropdown"> Where? <b class="caret"></b> </a> <ul class="dropdown-menu"> <li class="nav-header"> SUBNAV HEADER </li> <li class="divider"></li> <li><a href="#">SubNav 1</a></li> <li><a href="#">SubNav 2</a></li> </ul> </li> <li> <a href="#">Nav Item 2</a> </li> <li> <a href="#">Nav Item 3</a> </li> </ul> The classes that are included above HAVE to be included by default. I am wanting this php to output the above code, and depending on the $page value, if it is Nav Item 2, the <li class="active"> will be active. If you could figure out this php array and foreach statement for me, I hope I can learn from that. This is something where I know the output I desire and if I have the php infront of me that works, I can better understand it. Thanks!
June 14, 201313 yr I'm thinking maybe a multi-dimensional array for the sub menu. I'll post something shortly.
June 14, 201313 yr Sorry got distracted - I'm not completely sure I understand what you are trying to achieve but I think the easiest solution is to add in the classes manually echo '<ul>'; $nav_items = array('index'=>'Home', 'where'=>'Where?', 'appeals'=>'Current Appeals', 'news'=>'Latest News', 'events'=>'Events', 'dontate'=>'Dontate'); $default_subnav = '<a href="/where" class="dropdown-toggle disabled" data-toggle = "dropdown">where?<b class="caret"></b></a>' . "\n". '<ul class="dropdown-menu"><li class="nav-header"> SUBNAV HEADER </li><li class="divider"></li>'; $sub_nav = array( 'africa'=>'Africa', 'bangladesh'=>'Bangladesh', 'gaza'=>'Palestine/Gaza', 'kashmir'=>'Kashmir', 'pakistan'=>'Pakistan', 'uk'=>'United Kingdom' ); foreach ($nav_items as $nav_href=>$nav_title) { if ($nav_href != 'where') { if ($page == $nav_href) { echo '<li class="active"><a href="'. $nav_href . '">' . $nav_title . '</a></li>' . "\n"; } else { echo '<li><a href="'. $nav_href . '">' . $nav_title . '</a></li>' . "\n"; } } else { if ($page == $nav_href) { echo '<li class="active dropdown">' . $default_subnav . "\n"; } else { echo '<li class = "dropdown">' . $default_subnav . "\n"; } foreach ($sub_nav as $sub_item=>$value) { echo '<li><a href="../where/' . $sub_item . '">' . $value . '</a></li>' . "\n"; } echo '</ul></li>'; } } echo '</ul>'; Sorry if I've misunderstood what you are trying to do. btw I think you may have a typo in 'dontate'?
June 15, 201313 yr Author That's it.. very nearly! I've changed a couple of things but I see what you've done now. I've got it solved.. THANK YOU!
Create an account or sign in to comment