Page 1 of 1
Need help about coding
Posted: Mon Nov 21, 2016 5:04 am
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.

Re: Need help about coding
Posted: Mon Nov 21, 2016 1:27 pm
by Christopher
Please post the code you have tried for the drop down menu. We can give you help to get the code working.
Re: Need help about coding
Posted: Mon Nov 21, 2016 6:04 pm
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 © 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..
Re: Need help about coding
Posted: Tue Nov 22, 2016 12:27 pm
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.