Need help about coding

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
ant0o
Forum Newbie
Posts: 2
Joined: Mon Nov 21, 2016 5:02 am

Need help about coding

Post by ant0o »

Hai everyone. can someone help with some coding? i download a template at a website which i vaguely remember. i want to add some features like dropdown menu and i trying to add it and i'm fail. i want to add dropdown menu at services, portfolio and about. can someone help me ? :help: sry if my language is bad. :D
Attachments
Untitled.jpg
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Need help about coding

Post by Christopher »

Please post the code you have tried for the drop down menu. We can give you help to get the code working.
(#10850)
ant0o
Forum Newbie
Posts: 2
Joined: Mon Nov 21, 2016 5:02 am

Re: Need help about coding

Post by ant0o »

Code: Select all

<html class="no-js" lang="en"> 
<head>
    <title>COMPASS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="templatemo">
    <!-- 
    Compass Template
    http://www.templatemo.com/tm-454-compass
    -->
    <meta charset="UTF-8">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

    <!-- CSS Bootstrap & Custom -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/templatemo-misc.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/templatemo-main.css">
        
    <!-- Favicons -->
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    
    <!-- JavaScripts -->
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/modernizr.js"></script>
    <!--[if lt IE 8]>
	<div style=' clear: both; text-align:center; position: relative;'>
            <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
        </div>
    <![endif]-->
</head>
<body>
    
    <div id="home">
        <div class="site-header">
            <div class="top-header">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="left-header">
                                <span><i class="fa fa-phone"></i></span>
                                <span><i class="fa fa-envelope"></i></span>
                            </div> <!-- /.left-header -->
                        </div> <!-- /.col-md-6 -->
                        <div class="col-md-6 col-sm-6">
                            <div class="right-header text-right">
                                <ul class="social-icons">
                                    <li><a href="#" class="fa fa-facebook"></a></li>
                                    <li><a href="#" class="fa fa-instagram"></a></li>
                                    <li><a href="#" class="fa fa-twitter"></a></li>
                                    <li><a href="#" class="fa fa-google-plus"></a></li>
                                </ul>
                            </div> <!-- /.left-header -->
                        </div> <!-- /.col-md-6 -->
                    </div> <!-- /.row -->
                </div> <!-- /.container -->
            </div> <!-- /.top-header -->
            <div class="main-header">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-xs-6">
                            <div class="logo">
                                <h1><a href="#" title="Dreri">Compass</a></h1>
                            </div> <!-- /.logo -->
                        </div> <!-- /.col-md-4 -->
                        <div class="col-md-8 col-sm-8 col-xs-6">
                            <div class="menu text-right hidden-sm hidden-xs">
                                <ul>
                                    <li><a href="#home">HOME </a></li>
                                    <li><a href="#services">SERVICES</a></li>
                                    <li><a href="#portfolio">PORTFOLIO</a></li>
                                    <li><a href="#about">ABOUT</a></li>
                                    <li><a href="#contact">HUBUNGI</a></li>
                                    <li><a href="" class="I-KAMPUS">I-KAMPUS</a></li>
                                </ul>
                            </div> <!-- /.menu -->
                        </div> <!-- /.col-md-8 -->
                    </div> <!-- /.row -->
                    <div class="responsive-menu text-right visible-xs visible-sm">
                        <a href="#" class="toggle-menu fa fa-bars"></a>
                        <div class="menu">
                            <ul>
                                <li><a href="#home">Home</a></li>
                                <li><a href="#services">Services</a></li>
                                <li><a href="#portfolio">Portfolio</a></li>
                                <li><a href="#about">About</a></li>
                                <li><a href="#contact">Contact</a></li>
                                <li><a href="http://www.facebook.com/templatemo" class="external">External</a></li>
                            </ul>
                        </div> <!-- /.menu -->
                    </div> <!-- /.responsive-menu -->
                </div> <!-- /.container -->
            </div> <!-- /.header -->
        </div> <!-- /.site-header -->
    </div> <!-- /#home -->

    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/banner01.jpg" alt="">
                <div class="flex-caption">
                    <h2>Compass Template</h2>
                    <span></span>
                    <p>GERBANG MENUJU KEJAYAAN</p>
                </div>
            </li>
            <li>
                <img src="images/banner02.jpg" alt="">
                <div class="flex-caption">
                    <h2>Responsive Mobile</h2>
                    <span></span>
                    <p>Ea, similique, odit id consectetur est beatae quia dicta officiis ipsam itaque in<br>facilis aliquid quas officia voluptatem repellendus repellat!</p>
                </div>
            </li>
        </ul>
    </div>

    <div id="services" class="section-cotent">
        <div class="container">
            <div class="title-section text-center">
                <h2>PERKHIDMATAN KAMI</h2>
                <span></span>
            </div> <!-- /.title-section -->
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="service-item">
                        <div class="service-header">
                            <i class="fa fa-umbrella"></i>
                            <h3>Clean Design</h3>
                        </div>
                        <div class="service-description">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, sapiente, saepe, velit, repellendus doloribus blanditiis repudiandae nobis optio quasi nulla aliquam nisi voluptatibus.
                        </div>
                    </div> <!-- /.service-item -->
                </div> <!-- /.col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="service-item">
                        <div class="service-header">
                            <i class="fa fa-desktop"></i>
                            <h3>Fully Responsive</h3>
                        </div>
                        <div class="service-description">
                            <a rel="nofollow" href="http://www.templatemo.com/tm-454-compass" target="_parent">Compass</a> is free responsive website template from templatemo. You can download and use this template for your websites. Please tell your friends about our website. Thank you for visiting us.
                        </div>
                    </div> <!-- /.service-item -->
                </div> <!-- /.col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="service-item">
                        <div class="service-header">
                            <i class="fa fa-cogs"></i>
                            <h3>Easy Editing</h3>
                        </div>
                        <div class="service-description">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, sapiente, saepe, velit, repellendus doloribus blanditiis repudiandae nobis optio quasi nulla aliquam nisi voluptatibus.
                        </div>
                    </div> <!-- /.service-item -->
                </div> <!-- /.col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="service-item">
                        <div class="service-header">
                            <i class="fa fa-heart"></i>
                            <h3>Fast Support</h3>
                        </div>
                        <div class="service-description">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, sapiente, saepe, velit, repellendus doloribus blanditiis repudiandae nobis optio quasi nulla aliquam nisi voluptatibus.
                        </div>
                    </div> <!-- /.service-item -->
                </div> <!-- /.col-md-3 -->
            </div> <!-- /.row -->
        </div> <!-- /.container -->
    </div> <!-- /#services -->

    <div id="portfolio" class="section-content">
        <div class="container">
            <div class="title-section text-center">
                <h2>Our Portfolio</h2>
                <span></span>
            </div> <!-- /.title-section -->
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-thumb">
                        <img src="images/portfolio/item1.jpg" alt="Portfolio Item 1">
                        <div class="overlay">
                            <div class="inner">
                                <h4><a data-rel="lightbox" href="images/portfolio/item1.jpg">Nulla non enim</a></h4>
                                <span>Design</span>
                            </div>
                        </div> <!-- /.overlay -->
                    </div> <!-- /.portfolio-thumb -->
                </div> <!-- /.col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-thumb">
                        <img src="images/portfolio/item2.jpg" alt="Portfolio Item 2">
                        <div class="overlay">
                            <div class="inner">
                                <h4><a data-rel="lightbox" href="images/portfolio/item2.jpg">Duis nec urna</a></h4>
                                <span>Creative</span>
                            </div>
                        </div> <!-- /.overlay -->
                    </div> <!-- /.portfolio-thumb -->
                </div> <!-- /.col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-thumb">
                        <img src="images/portfolio/item3.jpg" alt="Portfolio Item 3">
                        <div class="overlay">
                            <div class="inner">
                                <h4><a data-rel="lightbox" href="images/portfolio/item3.jpg">Etiam magna</a></h4>
                                <span>Design</span>
                            </div>
                        </div> <!-- /.overlay -->
                    </div> <!-- /.portfolio-thumb -->
                </div> <!-- /.col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-thumb">
                        <img src="images/portfolio/item4.jpg" alt="Portfolio Item 4">
                        <div class="overlay">
                            <div class="inner">
                                <h4><a data-rel="lightbox" href="images/portfolio/item4.jpg">Vivamus dignissim</a></h4>
                                <span>Creative</span>
                            </div>
                        </div> <!-- /.overlay -->
                    </div> <!-- /.portfolio-thumb -->
                </div> <!-- /.col-md-3 -->
            </div> <!-- /.row -->
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-thumb">
                        <img src="images/portfolio/item5.jpg" alt="Portfolio Item 5">
                        <div class="overlay">
                            <div class="inner">
                                <h4><a data-rel="lightbox" href="images/portfolio/item5.jpg">Fusce semper</a></h4>
                                <span>HTML CSS</span>
                            </div>
                        </div> <!-- /.overlay -->
                    </div> <!-- /.portfolio-thumb -->
                </div> <!-- /.col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-thumb">
                        <img src="images/portfolio/item6.jpg" alt="Portfolio Item 6">
                        <div class="overlay">
                            <div class="inner">
                                <h4><a data-rel="lightbox" href="images/portfolio/item6.jpg">Nunc ultrices</a></h4>
                                <span>Mobile</span>
                            </div>
                        </div> <!-- /.overlay -->
                    </div> <!-- /.portfolio-thumb -->
                </div> <!-- /.col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-thumb">
                        <img src="images/portfolio/item7.jpg" alt="Portfolio Item 7">
                        <div class="overlay">
                            <div class="inner">
                                <h4><a data-rel="lightbox" href="images/portfolio/item7.jpg">Fusce vehicula</a></h4>
                                <span>HTML CSS</span>
                            </div>
                        </div> <!-- /.overlay -->
                    </div> <!-- /.portfolio-thumb -->
                </div> <!-- /.col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-thumb">
                        <img src="images/portfolio/item8.jpg" alt="Portfolio Item 8">
                        <div class="overlay">
                            <div class="inner">
                                <h4><a data-rel="lightbox" href="images/portfolio/item8.jpg">Vivamus elementum</a></h4>
                                <span>Mobile</span>
                            </div>
                        </div> <!-- /.overlay -->
                    </div> <!-- /.portfolio-thumb -->
                </div> <!-- /.col-md-3 -->
            </div> <!-- /.row -->
        </div> <!-- /.container -->
    </div> <!-- /#portfolio -->

    <div id="about" class="section-cotent">
        <div class="container">
            <div class="title-section text-center">
                <h2>TENTANG KAMI</h2>
              <span></span>
            </div> <!-- /.title-section -->
            <div class="row">
                <div class="col-md-8">
                    <h4 class="widget-title">Pengenalan</h4>
                    <p align="justify">COMPASS .</p>
              </div> <!-- /.col-md-3 -->
                <div class="col-md-4 our-skills">
                    <h4 class="widget-title">KEMAHIRAN KAMI</h4>
                    <ul class="progess-bars">
                        <li>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">Design 90%</div>
                            </div>
                        </li>
                        <li>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">HTML CSS 75%</div>
                            </div>
                        </li>
                        <li>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">WordPress 85%</div>
                            </div>
                        </li>
                        <li>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">Marketing 95%</div>
                            </div>
                        </li>
                    </ul>
                </div> <!-- /.col-md-3 -->
            </div> <!-- /.row -->
            <div class="row">
                <div class="our-team">
                    <div class="col-md-4 col-sm-6">
                        <div class="team-member">
                            <div class="member-img">
                                <img src="images/team/member-1.jpg" alt="Tracy">
                                <div class="overlay">
                                    <ul class="social">
                                        <li><a href="#" class="fa fa-facebook"></a></li>
                                        <li><a href="#" class="fa fa-twitter"></a></li>
                                        <li><a href="#" class="fa fa-instagram"></a></li>
                                    </ul>
                                </div> <!-- /.overlay -->
                            </div>
                            <div class="inner-content">
                                <h5>Tracy One</h5>
                                <span>Product Developer</span>
                                <p>Mauris vel lorem non odio accumsan scelerisque. Nullam id augue vel nibh soll.</p>
                            </div>
                        </div> <!-- /.team-member -->
                    </div> <!-- /.col-md-4 -->
                    <div class="col-md-4 col-sm-6">
                        <div class="team-member">
                            <div class="member-img">
                                <img src="images/team/member-2.jpg" alt="Mary">
                                <div class="overlay">
                                    <ul class="social">
                                        <li><a href="#" class="fa fa-facebook"></a></li>
                                        <li><a href="#" class="fa fa-twitter"></a></li>
                                        <li><a href="#" class="fa fa-instagram"></a></li>
                                    </ul>
                                </div> <!-- /.overlay -->
                            </div>
                            <div class="inner-content">
                                <h5>Mary Two</h5>
                                <span>Product Designer</span>
                                <p>Mauris vel lorem non odio accumsan scelerisque. Nullam id augue vel nibh soll.</p>
                            </div>
                        </div> <!-- /.team-member -->
                    </div> <!-- /.col-md-4 -->
                    <div class="col-md-4 col-sm-6">
                        <div class="team-member">
                            <div class="member-img">
                                <img src="images/team/member-3.jpg" alt="Julia">
                                <div class="overlay">
                                    <ul class="social">
                                        <li><a href="#" class="fa fa-facebook"></a></li>
                                        <li><a href="#" class="fa fa-twitter"></a></li>
                                        <li><a href="#" class="fa fa-instagram"></a></li>
                                    </ul>
                                </div> <!-- /.overlay -->
                            </div>
                            <div class="inner-content">
                                <h5>Julia Three</h5>
                                <span>Product Manager</span>
                                <p>Mauris vel lorem non odio accumsan scelerisque. Nullam id augue vel nibh soll.</p>
                            </div>
                        </div> <!-- /.team-member -->
                    </div> <!-- /.col-md-4 -->
                </div> <!-- /.our-team -->
            </div> <!-- /.row -->
        </div> <!-- /.container -->
    </div> <!-- /#about -->

    <div id="contact" class="section-cotent">
        <div class="container">
            <div class="title-section text-center">
                <h2>HUBUNGI KAMI</h2>
              <span></span>
            </div> <!-- /.title-section -->
            <div class="row">
                <div class="col-md-7 col-sm-6">
                    <h4 class="widget-title">Hantarkan mesej anda kepada kami</h4>
                    <div class="contact-form">
                        <p class="full-row">
                            <label for="name-id">Nama:</label>
                            <input type="text" id="name-id" name="name-id">
                        </p>
                        <p class="full-row">
                            <label for="email-id">Emel:</label>
                            <input type="text" id="email-id" name="email-id">
                        </p>
                        <p class="full-row">
                            <label for="subject-id">Subjek:</label>
                            <input type="text" id="subject-id" name="subject-id">
                        </p>
                        <p class="full-row">
                            <label for="message">Mesej:</label>
                            <textarea name="message" id="message" rows="6"></textarea>
                        </p>
                        <input class="mainBtn" type="submit" name="" value="Hantar">
                    </div>
                </div> <!-- /.col-md-3 -->
                <div class="col-md-5 col-sm-6">
                    <h4 class="widget-title"></h4>
                    <div class="map-holder">
                        <div class="google-map-canvas" id="map-canvas" style="height: 250px;">
                        </div>
                    </div> <!-- /.map-holder -->
                    <div class="contact-info">
                        <p>COMPASS</p>
                        <span><i class="fa fa-home"></i></span>
                        <span><i class="fa fa-phone"></i></span>
                        <span><i class="fa fa-envelope"></i></span>
                    </div>
                </div> <!-- /.col-md-3 -->
            </div> <!-- /.row -->
        </div> <!-- /.container -->
    </div> <!-- /#contact -->

    <div class="site-footer">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-8 col-xs-12">
                    <p>Copyright &copy; 2084 Company Name</p>
                </div> <!-- /.col-md-6 -->
                <div class="col-md-4 col-sm-4 col-xs-12">
                    <div class="go-top">
                        <a href="#" id="go-top">
                            <i class="fa fa-angle-up"></i>
                            Back to Top
                        </a>
                    </div>
                </div> <!-- /.col-md-6 -->
            </div> <!-- /.row -->
        </div> <!-- /.container -->
    </div> <!-- /.site-footer -->

    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/jquery.lightbox.js"></script>
    <script src="js/custom.js"></script>
    <script type="text/javascript">

        function initialize() {
          var mapOptions = {
			  scrollwheel: false,
            zoom: 15,
            center: new google.maps.LatLng(13.758468,100.567481)
          };

          var map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }

        function loadScript() {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
              'callback=initialize';
          document.body.appendChild(script);
        }

        window.onload = loadScript;
    </script>

</body>
</html>
here...fully coding. i only want add dropdown.. i already tried it many times. hmm..
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Need help about coding

Post by Christopher »

That is the whole page HTML. The part with the menu is just this HTML:

Code: Select all

            <div class="main-header">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-xs-6">
                            <div class="logo">
                                <h1><a href="#" title="Dreri">Compass</a></h1>
                            </div> <!-- /.logo -->
                        </div> <!-- /.col-md-4 -->
                        <div class="col-md-8 col-sm-8 col-xs-6">
                            <div class="menu text-right hidden-sm hidden-xs">
                                <ul>
                                    <li><a href="#home">HOME </a></li>
                                    <li><a href="#services">SERVICES</a></li>
                                    <li><a href="#portfolio">PORTFOLIO</a></li>
                                    <li><a href="#about">ABOUT</a></li>
                                    <li><a href="#contact">HUBUNGI</a></li>
                                    <li><a href="" class="I-KAMPUS">I-KAMPUS</a></li>
                                </ul>
                            </div> <!-- /.menu -->
                        </div> <!-- /.col-md-8 -->
                    </div> <!-- /.row -->
                    <div class="responsive-menu text-right visible-xs visible-sm">
                        <a href="#" class="toggle-menu fa fa-bars"></a>
                        <div class="menu">
                            <ul>
                                <li><a href="#home">Home</a></li>
                                <li><a href="#services">Services</a></li>
                                <li><a href="#portfolio">Portfolio</a></li>
                                <li><a href="#about">About</a></li>
                                <li><a href="#contact">Contact</a></li>
                                <li><a href="http://www.facebook.com/templatemo" class="external">External</a></li>
                            </ul>
                        </div> <!-- /.menu -->
                    </div> <!-- /.responsive-menu -->
                </div> <!-- /.container -->
            </div> <!-- /.header -->
The page is using Bootstrap, so you should look here for drop down menus: http://v4-alpha.getbootstrap.com/components/dropdowns/

Also search for "Bootstrap drop down menu" to get more examples.
(#10850)
Post Reply